@nocobase/app-template-default 1.0.0-beta.67 → 1.0.0-beta.69

package/client/components/permission-filter.tsx

@@ -0,0 +1,455 @@
+import { useId, useRef, useState, type ReactElement } from 'react';
+import { Button } from '#components/ui/button';
+import { Input } from '#components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '#components/ui/select';
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTitle,
+  PopoverTrigger,
+} from '#components/ui/popover';
+
+export interface PermissionFilterCondition {
+  readonly kind: 'condition';
+  readonly path: readonly string[];
+  readonly operator: string;
+  readonly value?: string | number | boolean;
+}
+export interface PermissionFilterValue {
+  readonly kind: 'group';
+  readonly logic: 'and' | 'or';
+  readonly items: readonly PermissionFilterCondition[];
+}
+export interface PermissionFilterLabels {
+  readonly configure: string;
+  readonly title: string;
+  readonly description: string;
+  readonly all: string;
+  readonly any: string;
+  readonly field: string;
+  readonly operator: string;
+  readonly valueType: string;
+  readonly value: string;
+  readonly text: string;
+  readonly number: string;
+  readonly boolean: string;
+  readonly true: string;
+  readonly false: string;
+  readonly add: string;
+  readonly limit: string;
+  readonly remove: string;
+  readonly cancel: string;
+  readonly apply: string;
+  readonly invalid: string;
+  readonly advanced: string;
+  readonly reconfigure: string;
+  readonly operators: Readonly<Record<string, string>>;
+}
+export interface PermissionFilterProps {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly value: unknown;
+  readonly fields: readonly { value: string; label: string }[];
+  readonly labels: PermissionFilterLabels;
+  readonly disabled?: boolean;
+  readonly onApply: (value: PermissionFilterValue) => void;
+}
+interface DraftCondition {
+  id: number;
+  field: string;
+  operator: string;
+  type: string;
+  value: string;
+}
+const operators = [
+  '$eq',
+  '$ne',
+  '$includes',
+  '$gt',
+  '$gte',
+  '$lt',
+  '$lte',
+  '$empty',
+  '$notEmpty',
+];
+function unary(operator: string): boolean {
+  return operator === '$empty' || operator === '$notEmpty';
+}
+function numeric(operator: string): boolean {
+  return ['$gt', '$gte', '$lt', '$lte'].includes(operator);
+}
+function read(
+  value: unknown,
+): { logic: 'and' | 'or'; rows: DraftCondition[] } | undefined {
+  if (!value || typeof value !== 'object') return undefined;
+  const root = value as { kind?: unknown; logic?: unknown; items?: unknown };
+  const items =
+    root.kind === 'condition'
+      ? [value]
+      : root.kind === 'group' &&
+          (root.logic === 'and' || root.logic === 'or') &&
+          Array.isArray(root.items)
+        ? root.items
+        : undefined;
+  if (!items?.length || items.length > 20) return undefined;
+  const rows: DraftCondition[] = [];
+  for (const item of items) {
+    if (!item || typeof item !== 'object') return undefined;
+    const node = item as {
+      kind?: unknown;
+      path?: unknown;
+      operator?: unknown;
+      value?: unknown;
+    };
+    if (
+      node.kind !== 'condition' ||
+      !Array.isArray(node.path) ||
+      node.path.length !== 1 ||
+      typeof node.path[0] !== 'string' ||
+      typeof node.operator !== 'string' ||
+      !operators.includes(node.operator) ||
+      (!unary(node.operator) &&
+        !['string', 'number', 'boolean'].includes(typeof node.value))
+    )
+      return undefined;
+    rows.push({
+      id: rows.length,
+      field: node.path[0],
+      operator: node.operator,
+      type:
+        typeof node.value === 'number'
+          ? 'number'
+          : typeof node.value === 'boolean'
+            ? 'boolean'
+            : 'text',
+      value:
+        typeof node.value === 'string'
+          ? node.value
+          : typeof node.value === 'number' || typeof node.value === 'boolean'
+            ? String(node.value)
+            : '',
+    });
+  }
+  return { logic: root.logic === 'or' ? 'or' : 'and', rows };
+}
+function Choice({
+  label,
+  items,
+  value,
+  onChange,
+}: {
+  label: string;
+  items: readonly { value: string; label: string }[];
+  value: string;
+  onChange: (value: string) => void;
+}): ReactElement {
+  return (
+    <Select
+      items={items}
+      value={value}
+      onValueChange={(next) => {
+        if (next !== null) onChange(next);
+      }}
+    >
+      <SelectTrigger size='sm' className='w-full' aria-label={label}>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent className='w-auto max-w-[min(var(--container-sm),var(--available-width))] min-w-(--anchor-width) [&_[data-slot=select-item]>:first-child]:whitespace-normal'>
+        <SelectGroup>
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}
+function FilterDraft({
+  value,
+  fields,
+  labels: w,
+  onApply,
+  onCancel,
+}: Pick<PermissionFilterProps, 'value' | 'fields' | 'labels' | 'onApply'> & {
+  onCancel: () => void;
+}): ReactElement {
+  const [initial] = useState(() => read(value));
+  const empty = (): DraftCondition => ({
+    id: 0,
+    field: fields[0]?.value ?? '',
+    operator: '$eq',
+    type: 'text',
+    value: '',
+  });
+  const [advanced, setAdvanced] = useState(value !== undefined && !initial);
+  const [logic, setLogic] = useState<'and' | 'or'>(initial?.logic ?? 'and');
+  const [rows, setRows] = useState<DraftCondition[]>(
+    () => initial?.rows ?? [empty()],
+  );
+  const [nextId, setNextId] = useState(rows.length);
+  const id = useId();
+  const addRef = useRef<HTMLButtonElement>(null);
+  const update = (rowId: number, patch: Partial<DraftCondition>) =>
+    setRows((current) =>
+      current.map((row) => (row.id === rowId ? { ...row, ...patch } : row)),
+    );
+  const valid =
+    !advanced &&
+    rows.length > 0 &&
+    rows.every(
+      (row) =>
+        fields.some((field) => field.value === row.field) &&
+        (unary(row.operator) ||
+          (row.value.trim() !== '' &&
+            (row.type !== 'number' || Number.isFinite(Number(row.value))) &&
+            (row.type !== 'boolean' || ['true', 'false'].includes(row.value)))),
+    );
+  return (
+    <div
+      className='flex min-h-0 flex-col gap-3'
+      onKeyDown={(event) => {
+        if (
+          event.key === 'Enter' &&
+          !event.nativeEvent.isComposing &&
+          event.target instanceof HTMLInputElement
+        )
+          event.preventDefault();
+      }}
+    >
+      {advanced ? (
+        <div className='flex flex-col gap-3'>
+          <p className='text-sm text-muted-foreground'>{w.advanced}</p>
+          <Button
+            type='button'
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              setAdvanced(false);
+              setRows([empty()]);
+              setNextId(1);
+            }}
+          >
+            {w.reconfigure}
+          </Button>
+        </div>
+      ) : (
+        <>
+          <Choice
+            label={w.title}
+            value={logic}
+            items={[
+              { value: 'and', label: w.all },
+              { value: 'or', label: w.any },
+            ]}
+            onChange={(value) => setLogic(value === 'or' ? 'or' : 'and')}
+          />
+          <div className='flex min-h-0 flex-col gap-3 overflow-y-auto'>
+            {rows.map((row, index) => (
+              <fieldset
+                key={row.id}
+                className='flex flex-col gap-2 rounded-lg border p-3'
+              >
+                <legend className='sr-only'>{`${w.field} ${index + 1}`}</legend>
+                <div className='grid grid-cols-1 gap-2 sm:grid-cols-2'>
+                  <Choice
+                    label={`${w.field} ${index + 1}`}
+                    items={fields}
+                    value={row.field}
+                    onChange={(field) => update(row.id, { field })}
+                  />
+                  <Choice
+                    label={`${w.operator} ${index + 1}`}
+                    items={operators.map((value) => ({
+                      value,
+                      label: w.operators[value] ?? value,
+                    }))}
+                    value={row.operator}
+                    onChange={(operator) =>
+                      update(row.id, {
+                        operator,
+                        ...(numeric(operator)
+                          ? { type: 'number' }
+                          : operator === '$includes'
+                            ? { type: 'text' }
+                            : {}),
+                      })
+                    }
+                  />
+                  {!unary(row.operator) && (
+                    <>
+                      {['$eq', '$ne'].includes(row.operator) && (
+                        <Choice
+                          label={`${w.valueType} ${index + 1}`}
+                          items={[
+                            { value: 'text', label: w.text },
+                            { value: 'number', label: w.number },
+                            { value: 'boolean', label: w.boolean },
+                          ]}
+                          value={row.type}
+                          onChange={(type) =>
+                            update(row.id, { type, value: '' })
+                          }
+                        />
+                      )}
+                      {row.type === 'boolean' ? (
+                        <Choice
+                          label={`${w.value} ${index + 1}`}
+                          items={[
+                            { value: 'true', label: w.true },
+                            { value: 'false', label: w.false },
+                          ]}
+                          value={row.value}
+                          onChange={(value) => update(row.id, { value })}
+                        />
+                      ) : (
+                        <Input
+                          aria-label={`${w.value} ${index + 1}`}
+                          aria-describedby={`${id}-validation`}
+                          placeholder={w.value}
+                          value={row.value}
+                          inputMode={row.type === 'number' ? 'decimal' : 'text'}
+                          onChange={(event) =>
+                            update(row.id, { value: event.target.value })
+                          }
+                        />
+                      )}
+                    </>
+                  )}
+                </div>
+                <div className='flex justify-end'>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    size='sm'
+                    onClick={() => {
+                      setRows((current) =>
+                        current.filter((item) => item.id !== row.id),
+                      );
+                      queueMicrotask(() => addRef.current?.focus());
+                    }}
+                  >
+                    {w.remove}
+                  </Button>
+                </div>
+              </fieldset>
+            ))}
+          </div>
+          <Button
+            ref={addRef}
+            type='button'
+            variant='outline'
+            size='sm'
+            disabled={rows.length >= 20}
+            onClick={() => {
+              setRows((current) => [...current, { ...empty(), id: nextId }]);
+              setNextId((current) => current + 1);
+            }}
+          >
+            {w.add}
+          </Button>
+          {rows.length >= 20 && (
+            <p className='text-xs text-muted-foreground'>{w.limit}</p>
+          )}
+          {!valid && (
+            <p
+              id={`${id}-validation`}
+              className='text-sm text-muted-foreground'
+            >
+              {w.invalid}
+            </p>
+          )}
+        </>
+      )}
+      <div className='flex shrink-0 justify-end gap-2 border-t pt-3'>
+        <Button type='button' variant='outline' size='sm' onClick={onCancel}>
+          {w.cancel}
+        </Button>
+        <Button
+          type='button'
+          size='sm'
+          disabled={!valid}
+          onClick={() =>
+            onApply({
+              kind: 'group',
+              logic,
+              items: rows.map((row) => ({
+                kind: 'condition',
+                path: [row.field],
+                operator: row.operator,
+                ...(unary(row.operator)
+                  ? {}
+                  : {
+                      value:
+                        row.type === 'number'
+                          ? Number(row.value)
+                          : row.type === 'boolean'
+                            ? row.value === 'true'
+                            : row.value,
+                    }),
+              })),
+            })
+          }
+        >
+          {w.apply}
+        </Button>
+      </div>
+    </div>
+  );
+}
+/** Native filter input; Apply edits the containing role draft, never a server directly. */
+export function PermissionFilter({
+  open,
+  onOpenChange,
+  value,
+  fields,
+  labels,
+  disabled = false,
+  onApply,
+}: PermissionFilterProps): ReactElement {
+  return (
+    <Popover open={open && !disabled} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        render={
+          <Button
+            type='button'
+            variant='outline'
+            size='sm'
+            className='h-6 px-2 text-xs'
+            disabled={disabled}
+          />
+        }
+      >
+        {labels.configure}
+      </PopoverTrigger>
+      <PopoverContent
+        align='start'
+        className='flex max-h-[min(36rem,var(--available-height))] w-xl max-w-(--available-width) flex-col gap-3 p-4'
+      >
+        <PopoverTitle>{labels.title}</PopoverTitle>
+        <PopoverDescription>{labels.description}</PopoverDescription>
+        {open && !disabled && (
+          <FilterDraft
+            value={value}
+            fields={fields}
+            labels={labels}
+            onCancel={() => onOpenChange(false)}
+            onApply={(filter) => {
+              onApply(filter);
+              onOpenChange(false);
+            }}
+          />
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/client/components/route-overlay.tsx

@@ -20,6 +20,8 @@ import {
   Dialog,
   DialogClose,
   DialogDescription,
+  DialogFooter,
+  DialogHeader,
   DialogOverlay,
   DialogPortal,
   DialogTitle,
@@ -147,7 +149,10 @@ export function RouteOverlay({
                 return true;
               }}
               className={cn(
-                'fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl bg-popover text-popover-foreground shadow-lg outline-none duration-150 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',
+                // The frame of `DialogContent` (position, surface, ring, motion), laid out as a column so the header and
+                // footer stay fixed while only the body scrolls within the viewport cap.
+                'fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl bg-popover text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',
+                // Route dialogs hold the 5-8 field forms of guideline I1, hence wider than the plain dialog's default.
                 'flex max-h-[calc(100dvh-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl',
                 // The viewport constraints are deliberate; all ordinary styling uses theme tokens.
                 drawer &&
@@ -155,27 +160,35 @@ export function RouteOverlay({
                 className,
               )}
             >
+              {/* The regions reproduce `DialogContent`'s `p-6 gap-5` around the dialog primitives, split so the body can
+                  scroll on its own: the header and body own the padding, and the body's top padding is the gap. */}
               <header
                 data-slot='route-overlay-header'
-                className='flex shrink-0 flex-col gap-2 border-b p-6 pr-14'
+                className='shrink-0 px-6 pt-6'
               >
-                <DialogTitle>{title}</DialogTitle>
-                {description != null && (
-                  <DialogDescription>{description}</DialogDescription>
-                )}
+                <DialogHeader>
+                  <DialogTitle>{title}</DialogTitle>
+                  {description != null && (
+                    <DialogDescription>{description}</DialogDescription>
+                  )}
+                </DialogHeader>
               </header>
               <div
                 data-slot='route-overlay-body'
-                className='min-h-0 flex-1 overflow-y-auto p-6'
+                className={cn(
+                  'min-h-0 flex-1 overflow-y-auto px-6 pt-5',
+                  footer != null ? 'pb-5' : 'pb-6',
+                )}
               >
                 {children}
               </div>
               {footer != null && (
-                <footer
-                  data-slot='route-overlay-footer'
-                  className='flex shrink-0 flex-wrap justify-end gap-2 border-t bg-muted/30 p-6'
-                >
-                  {footer}
+                <footer data-slot='route-overlay-footer' className='shrink-0'>
+                  {/* `DialogFooter` pulls itself out of `DialogContent`'s padding with negative margins; here it
+                      already sits at the panel's edges, and the panel clips the corners. */}
+                  <DialogFooter className='mx-0 mb-0 rounded-none'>
+                    {footer}
+                  </DialogFooter>
                 </footer>
               )}
               <DialogClose
@@ -183,7 +196,7 @@ export function RouteOverlay({
                   <Button
                     variant='ghost'
                     size='icon-sm'
-                    className='absolute top-4 right-4'
+                    className='absolute top-2 right-2'
                   />
                 }
               >

package/client/components/status-badge.tsx

@@ -11,17 +11,23 @@ const tones = {
     'border-(--status-success)/20 bg-(--status-success-background) text-(--status-success)',
 };
 
-/** Quiet semantic status labels; reserve solid primary fills for actions. */
+/**
+ * Quiet semantic status labels; reserve solid primary fills for actions. `size='sm'` is the small badge, for a status
+ * beside a title or on a dense card (`data-size` in `client/styles.css`).
+ */
 export function StatusBadge({
   tone = 'neutral',
+  size,
   className,
   ...props
 }: Omit<ComponentProps<typeof Badge>, 'variant'> & {
   readonly tone?: keyof typeof tones;
+  readonly size?: 'sm';
 }): ReactElement {
   return (
     <Badge
       {...props}
+      data-size={size}
       variant='outline'
       className={cn(tones[tone], className)}
     />

package/client/components/ui/checkbox.tsx

@@ -0,0 +1,25 @@
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { cn } from 'cn';
+import { CheckIcon } from 'lucide-react';
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot='checkbox'
+      className={cn(
+        'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot='checkbox-indicator'
+        className='grid place-content-center text-current transition-none [&>svg]:size-3.5'
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

package/client/components/ui/sidebar.tsx

@@ -25,8 +25,6 @@ import {
 } from '#components/ui/tooltip';
 import { PanelLeftIcon } from 'lucide-react';
 
-const SIDEBAR_COOKIE_NAME = 'sidebar_state';
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = '16rem';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
@@ -82,8 +80,7 @@ function SidebarProvider({
         _setOpen(openState);
       }
 
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      // Persistence belongs to the application-scoped preference, not an origin-wide cookie.
     },
     [setOpenProp, open],
   );

package/client/components/ui/switch.tsx

@@ -0,0 +1,30 @@
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+import { cn } from 'cn';
+import type { ReactElement } from 'react';
+
+function Switch({
+  className,
+  size = 'default',
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: 'sm' | 'default';
+}): ReactElement {
+  return (
+    <SwitchPrimitive.Root
+      data-slot='switch'
+      data-size={size}
+      className={cn(
+        'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot='switch-thumb'
+        className='pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground'
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };