torch-glare 2.1.2 → 2.1.3

package/apps/lib/components/DataViews/DataViewsLayout.tsx

@@ -7,6 +7,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type ReactNode,
 } from "react";
 import { List, LayoutGrid, Inbox as InboxIcon, Network } from "lucide-react";
 import type {
@@ -41,6 +42,8 @@ export type DataViewsLayoutProps = {
   inboxConfig?: InboxConfig;
   treeConfig?: TreeConfig;
   kanbanGroupBy?: string;
+  kanbanTitleField?: string;
+  onKanbanColumnAction?: (columnId: string) => void;
 
   views?: ViewVisibility;
 
@@ -57,6 +60,14 @@ export type DataViewsLayoutProps = {
   onAddNew?: () => void;
   addNewLabel?: string;
 
+  inboxItemHref?: (item: DynamicRecord, id: any) => string;
+  inboxSelectedId?: any;
+  inboxRenderDetail?: (item: DynamicRecord | null) => ReactNode;
+
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  searchPlaceholder?: string;
+
   className?: string;
   theme?: Themes;
 };
@@ -83,6 +94,8 @@ export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
       inboxConfig,
       treeConfig,
       kanbanGroupBy,
+      kanbanTitleField,
+      onKanbanColumnAction,
       views,
       columns,
       filters,
@@ -94,6 +107,12 @@ export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
       showTitle = true,
       onAddNew,
       addNewLabel,
+      inboxItemHref,
+      inboxSelectedId,
+      inboxRenderDetail,
+      searchValue,
+      onSearchChange,
+      searchPlaceholder,
       className,
       theme,
     } = props;
@@ -180,7 +199,10 @@ export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
         className={cn(
           // Shell is always black (matches Figma): the dark header and config
           // rail sit on it; the Master Container is the white surface inside.
-          "flex h-screen gap-2 bg-black p-2 text-content-presentation-global-primary",
+          // `overflow-hidden` traps any child overflow — without it, a tall
+          // config-panel body escapes and creates a page-level scrollbar in
+          // addition to the panel's own.
+          "flex h-screen gap-2 overflow-hidden bg-black text-content-presentation-global-primary",
           className,
         )}
       >
@@ -197,13 +219,16 @@ export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
               onToggleSettings={togglePanel}
               onAddNew={onAddNew}
               addNewLabel={addNewLabel}
+              searchValue={searchValue}
+              onSearchChange={onSearchChange}
+              searchPlaceholder={searchPlaceholder}
             />
           )}
 
           <main className="flex min-h-0 flex-1 overflow-hidden ">
             {/* Master Container — white card, 16px radius, #D4D4D4 hairline
                 border. Fixed surface (matches header chrome). */}
-            <div className="flex flex-1 overflow-hidden rounded-[16px] border border-border-presentation-global-primary ">
+            <div className="flex flex-1 overflow-hidden rounded-[16px]">
               {/* Clip the scrollable surface to the parent radius MINUS the 1px
                   border (16 − 1 = 15px). Using the full 16px here let the
                   opaque view background sit flush with the parent's outer edge
@@ -234,6 +259,8 @@ export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
                     config={effectiveConfig}
                     onDataUpdate={onDataUpdate}
                     groupByField={effectiveKanbanGroupBy}
+                    titleField={kanbanTitleField}
+                    onColumnAction={onKanbanColumnAction}
                   />
                 )}
                 {currentView === "inbox" && enabledViews.inbox && (
@@ -248,6 +275,9 @@ export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
                     filterState={filterState}
                     onFilterChange={setFilterState}
                     showFilters={false}
+                    itemHref={inboxItemHref}
+                    selectedItemId={inboxSelectedId}
+                    renderDetail={inboxRenderDetail}
                   />
                 )}
                 {currentView === "tree" && enabledViews.tree && (

package/apps/lib/components/DataViews/FilterPanel.tsx

@@ -1,11 +1,15 @@
 "use client"
 
+import { Fragment } from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 import { Button } from "../Button"
 import { Badge } from "../Badge"
 import { X } from "lucide-react"
 import { Checkbox } from "../Checkbox"
 import { Divider } from "../Divider"
 import { Label } from "../Label"
+import { DataViewRadio } from "./DataViewRadio"
+import { cn } from "../../utils/cn"
 import type {
   DynamicRecord,
   DynamicFilterConfig,
@@ -37,6 +41,13 @@ type FilterPanelProps = {
   onFilterChange: (path: string, value: FilterValue) => void
   onClearAll: () => void
   filterConfig?: DynamicFilterConfig[]
+  /**
+   * "default": standalone left-rail style (border, padding, light surface).
+   * "panel": matches the Config tab inside DataViewsConfigPanel — no outer
+   * chrome, white section headers, categorical options inside a #1C1D1F
+   * rounded container, sections separated by #2C2D2E dividers.
+   */
+  variant?: "default" | "panel"
 }
 
 const NUMERIC_TYPES: FieldType[] = [
@@ -172,6 +183,7 @@ export function FilterPanel({
   onFilterChange,
   onClearAll,
   filterConfig,
+  variant = "default",
 }: FilterPanelProps) {
   const entries = buildFilterableEntries(data, fields, filterConfig)
 
@@ -198,6 +210,57 @@ export function FilterPanel({
 
   const countBadge = resolveBadgeVariant("gray")
 
+  if (variant === "panel") {
+    return (
+      <div className="flex flex-col gap-6 px-3 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-[18px] font-[510] leading-[1.32] tracking-[-0.01em] text-white">
+              Filters
+            </h3>
+            {totalFilters > 0 && (
+              <Badge
+                {...countBadge}
+                label={String(totalFilters)}
+                className="h-5 min-w-[20px] rounded-full p-0 text-xs"
+                size="XS"
+              />
+            )}
+          </div>
+          {totalFilters > 0 && (
+            <button
+              type="button"
+              onClick={onClearAll}
+              className="flex items-center gap-1 rounded-[4px] bg-white/[0.15] px-1.5 py-0.5 text-[12px] font-[510] text-white transition-colors hover:bg-white/25"
+            >
+              <X className="h-3 w-3" />
+              Clear
+            </button>
+          )}
+        </div>
+
+        {entries.map((entry, index) => (
+          <Fragment key={entry.path}>
+            {index > 0 && <div className="h-px w-full bg-[#2C2D2E]" />}
+            <div className="space-y-3">
+              <h3 className="text-[18px] font-[510] leading-[1.32] tracking-[-0.01em] text-white">
+                {entry.label}
+              </h3>
+              <FilterBody
+                entry={entry}
+                data={data}
+                value={filters[entry.path]}
+                onCategoricalToggle={(opt) => toggleCategorical(entry.path, opt)}
+                onSetFilter={(v) => setFilter(entry.path, v)}
+                variant="panel"
+              />
+            </div>
+          </Fragment>
+        ))}
+      </div>
+    )
+  }
+
   return (
     <div className="w-64 border-r border-border-presentation-global-primary bg-background-presentation-body-overlay-primary p-4 overflow-y-auto">
       <div className="flex items-center justify-between mb-4">
@@ -209,7 +272,7 @@ export function FilterPanel({
               label={String(totalFilters)}
               className="h-5 min-w-[20px] rounded-full p-0 text-xs"
               size="XS"
-             
+
             />
           )}
         </div>
@@ -248,12 +311,14 @@ function FilterBody({
   value,
   onCategoricalToggle,
   onSetFilter,
+  variant = "default",
 }: {
   entry: Entry
   data: DynamicRecord[]
   value: FilterValue | undefined
   onCategoricalToggle: (option: string) => void
   onSetFilter: (next: FilterValue) => void
+  variant?: "default" | "panel"
 }) {
   if (entry.kind === "numeric-range" && entry.field) {
     const extremes = computeNumericExtremes(data, entry.path)
@@ -293,12 +358,92 @@ function FilterBody({
 
   const opts = getCategoricalOptions(data, entry.path, entry.field, entry.legacy)
   const selected = Array.isArray(value) ? value : []
+  const isSingle = entry.field?.filterMode === "single"
+
+  if (isSingle) {
+    const current = selected[0] ?? ""
+    const onSingleChange = (next: string) => onSetFilter(next ? [next] : [])
+    return (
+      <RadioGroupPrimitive.Root
+        value={current}
+        onValueChange={onSingleChange}
+        className={cn(
+          "flex flex-col space-y-0 rounded-[12px] bg-[#1C1D1F] p-1",
+          // Hide the divider directly above and below the hovered row.
+          "[&>div:has(>[role=radio]:hover)>.dv-divider]:opacity-0",
+          "[&>div:has(>[role=radio]:hover)+div>.dv-divider]:opacity-0",
+        )}
+      >
+        {opts.map((opt, i) => {
+          const isSelected = current === opt
+          const badgeVariant = entry.field?.variants?.[opt]
+          const badgeProps = badgeVariant ? resolveBadgeVariant(badgeVariant) : null
+          return (
+            <div key={opt}>
+              {i > 0 && (
+                <div className="dv-divider h-px bg-[#2C2D2E]" />
+              )}
+              <DataViewRadio value={opt}>
+                {entry.legacy?.render
+                  ? entry.legacy.render(opt, isSelected)
+                  : badgeProps
+                    ? <Badge {...badgeProps} label={opt} size="XS" />
+                    : opt}
+              </DataViewRadio>
+            </div>
+          )
+        })}
+      </RadioGroupPrimitive.Root>
+    )
+  }
+
+  if (variant === "panel") {
+    return (
+      <div
+        className={cn(
+          "flex flex-col rounded-[12px] bg-[#1C1D1F] p-1",
+          // Hide the divider directly above and below the hovered row.
+          "[&>div:has(>label:hover)>.dv-divider]:opacity-0",
+          "[&>div:has(>label:hover)+div>.dv-divider]:opacity-0",
+        )}
+      >
+        {opts.map((opt, i) => {
+          const isSelected = selected.includes(opt)
+          const badgeVariant = entry.field?.variants?.[opt]
+          const badgeProps = badgeVariant ? resolveBadgeVariant(badgeVariant) : null
+          return (
+            <div key={opt}>
+              {i > 0 && <div className="dv-divider h-px bg-[#2C2D2E]" />}
+              <label
+                htmlFor={`${entry.path}-${opt}`}
+                className="flex cursor-pointer items-center gap-2 rounded-[8px] px-2 py-2 text-[14px] text-white hover:bg-white/5"
+              >
+                <Checkbox
+                  id={`${entry.path}-${opt}`}
+                  checked={isSelected}
+                  onCheckedChange={() => onCategoricalToggle(opt)}
+                />
+                <span className="flex-1 leading-none">
+                  {entry.legacy?.render
+                    ? entry.legacy.render(opt, isSelected)
+                    : badgeProps
+                      ? <Badge {...badgeProps} label={opt} size="XS" />
+                      : opt}
+                </span>
+              </label>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-2">
       {opts.map((opt) => {
         const isSelected = selected.includes(opt)
-        const variant = entry.field?.variants?.[opt]
-        const badgeProps = variant ? resolveBadgeVariant(variant) : null
+        const badgeVariant = entry.field?.variants?.[opt]
+        const badgeProps = badgeVariant ? resolveBadgeVariant(badgeVariant) : null
         return (
           <div key={opt} className="flex items-center space-x-2">
             <Checkbox

package/apps/lib/components/DataViews/HeaderSearch.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../Button";
+
+export type HeaderSearchProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+};
+
+export function HeaderSearch({
+  value,
+  onChange,
+  placeholder = "Search...",
+}: HeaderSearchProps) {
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const wrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open) inputRef.current?.focus();
+  }, [open]);
+
+  // Auto-collapse on outside click only when the input is empty — keeps the
+  // expanded state if the user has typed a query but clicks away.
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(e: MouseEvent) {
+      if (!wrapRef.current) return;
+      if (wrapRef.current.contains(e.target as Node)) return;
+      if (!value) setOpen(false);
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [open, value]);
+
+  function clearAndCollapse() {
+    onChange("");
+    setOpen(false);
+  }
+
+  if (!open) {
+    return (
+      <Button
+        variant="BluContStyle"
+        size="M"
+        buttonType="icon"
+        aria-label="Open search"
+        onClick={() => setOpen(true)}
+        className="shrink-0 rounded-[6px] border border-border-presentation-global-primary"
+      >
+        <Search className="h-[18px] w-[18px]" />
+      </Button>
+    );
+  }
+
+  return (
+    <div
+      ref={wrapRef}
+      className="relative flex h-[28px] w-[260px] shrink-0 items-center justify-center rounded-[6px] border border-border-presentation-state-focus bg-background-presentation-form-field-primary px-1 shadow-[0_1px_6px_0_rgba(0,0,0,0.30)] transition-all duration-150 ease-in-out"
+    >
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") clearAndCollapse();
+        }}
+        size={1}
+        className="min-w-0 flex-1 bg-transparent text-[14px] leading-none text-white caret-[#1E7AFE] placeholder:text-content-presentation-global-tertiary focus:outline-none"
+      />
+      <button
+        type="button"
+        aria-label="Clear search"
+        onClick={clearAndCollapse}
+        className="flex shrink-0 items-center justify-center self-stretch px-1"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+        >
+          <path
+            d="M7.99992 14.6666C4.31802 14.6666 1.33325 11.6818 1.33325 7.99992C1.33325 4.31802 4.31802 1.33325 7.99992 1.33325C11.6818 1.33325 14.6666 4.31802 14.6666 7.99992C14.6666 11.6818 11.6818 14.6666 7.99992 14.6666ZM7.99992 7.05712L6.1143 5.17149L5.17149 6.1143L7.05712 7.99992L5.17149 9.88552L6.1143 10.8283L7.99992 8.94272L9.88552 10.8283L10.8283 9.88552L8.94272 7.99992L10.8283 6.1143L9.88552 5.17149L7.99992 7.05712Z"
+            fill="white"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}