@vertesia/ui 0.78.0 → 0.79.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "0.78.0",
+  "version": "0.79.0",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -56,13 +56,14 @@
     "react-dom": "^19.1.0",
     "react-error-boundary": "^6.0.0",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^3.0.6",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.0",
     "ts-md5": "^1.3.1",
     "unist-util-visit": "^5.0.0",
-    "@vertesia/client": "0.78.0",
-    "@vertesia/common": "0.78.0",
-    "@vertesia/json": "0.78.0"
+    "@vertesia/client": "0.79.0",
+    "@vertesia/json": "0.79.0",
+    "@vertesia/common": "0.79.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",

package/src/core/components/SelectList.tsx

@@ -1,6 +1,7 @@
 import { Check } from "lucide-react";
 import clsx from "clsx";
 import { ReactNode, useMemo, useState } from "react";
+import { Input } from "./shadcn";
 
 const Default_Option_Style = "flex-1 px-2 py-2 hover:bg-accent nowrap";
 
@@ -28,9 +29,12 @@ export interface SelectListProps<T> {
     by?: (keyof T & string) | ((o1: T, o2: T) => boolean);
     optionLayout?: (opt: T, selected: boolean) => OptionLayout;
     noCheck?: boolean;
+    filterBy?: (filterValue: string) => (opt: T) => boolean;
 }
-export function SelectList<T>({ value, options, onChange, className, optionLayout, by, noCheck }: SelectListProps<T>) {
+export function SelectList<T>({ value, options, onChange, className, optionLayout, by, noCheck, filterBy }: SelectListProps<T>) {
     const [selected, setSelected] = useState(value);
+    const [filterValue, setFilterValue] = useState("");
+
     const onSelect = (option: T) => {
         setSelected(option);
         onChange(option);
@@ -46,7 +50,13 @@ export function SelectList<T>({ value, options, onChange, className, optionLayou
     }, [by]);
     return (
         <div className={clsx("", className)}>
+            {filterBy && (
+                <Input type="text" placeholder="Filter..." value={filterValue} onChange={(value) => setFilterValue(value)} />
+            )}
             {options.map((option, i) => {
+                if (filterBy && !filterBy(filterValue)(option)) {
+                    return null;
+                }
                 const isSelected = selected ? optionEquals(selected, option) : false;
                 let layout: OptionLayout;
                 if (optionLayout) {

package/src/core/components/SidePanel.tsx

@@ -53,7 +53,7 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                             onClick={onClose}
                         />
                     )}
-                    
+
                     <div className="fixed inset-y-0 right-0 overflow-hidden">
                         <div className="absolute inset-0 overflow-hidden">
                             <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
@@ -71,17 +71,20 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                                             className="absolute left-0 top-0 bottom-0 w-1 cursor-ew-resize hover:bg-indigo-500 transition-colors"
                                             onMouseDown={handleDragStart}
                                         />
-                                        <div className="flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-6 shadow-xl">
-                                            <div className="px-2 sm:px-4">
-                                                <div className="flex items-start justify-between">
-                                                    <h2 className="w-full text-base font-semibold leading-6">
-                                                        <div className="text-2xl">{title ?? ""}</div>
-                                                    </h2>
-                                                    <div className="ml-3 flex h-7 items-center">
-                                                        <CloseButton onClose={onClose} />
+                                        <div className="flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-2 shadow-xl">
+                                            {title && (
+                                                <div className="px-2 sm:px-4">
+                                                    <div className="flex items-start justify-between">
+                                                        <h2 className="w-full text-base font-semibold leading-6">
+                                                            <div className="text-2xl">{title ?? ""}</div>
+                                                        </h2>
+                                                        <div className="ml-3 flex h-7 items-center">
+                                                            <CloseButton onClose={onClose} />
+                                                        </div>
                                                     </div>
                                                 </div>
-                                            </div>
+                                            )}
+
                                             <div className="px-2 sm:px-4">
                                                 {children}
                                             </div>

package/src/core/components/shadcn/filters/filterBar.tsx

@@ -29,7 +29,8 @@ interface FilterProviderProps {
 const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterProviderProps) => {
   const url = new URL(window.location.href);
   const searchParams = url.searchParams;
-  
+  const [hasInitialized, setHasInitialized] = React.useState(false);
+
   useEffect(() => {
     try {
       const params = new URLSearchParams(searchParams.toString());
@@ -42,16 +43,22 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
             // Handle stringList with direct string array - always array format
             values = `[${(filter.value as string[]).map(item => encodeURIComponent(item)).join(',')}]`;
           } else if (Array.isArray(filter.value)) {
-            if (filter.multiple || filter.value.length > 1) {
-              // Handle multiple values - use array format
-              values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || '')).join(',')}]`;
+            if (filter.multiple) {
+              // Handle multiple filters - always use array format for multiple=true
+              values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || item || '')).join(',')}]`;
+            } else if (filter.value.length > 1) {
+              // Handle multiple values for non-multiple filters
+              values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || item || '')).join(',')}]`;
             } else {
-              // Single value in array - don't use array format
+              // Single value in array for non-multiple filter - don't use array format
               const firstValue = filter.value[0];
               if (typeof firstValue === 'string') {
                 values = encodeURIComponent(firstValue);
+              } else if (typeof firstValue === 'object' && firstValue?.value !== undefined) {
+                // Handle FilterOption object
+                values = encodeURIComponent(String(firstValue.value));
               } else {
-                values = encodeURIComponent(firstValue?.value || '');
+                values = encodeURIComponent(String(firstValue || ''));
               }
             }
           } else {
@@ -73,14 +80,14 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
 
   useEffect(() => {
     const filtersParam = searchParams.get('filters');
-    if (filtersParam) {
+    if (filtersParam && filterGroups.length > 0 && !hasInitialized) {
       try {
         // Parse format with array indicators: filterName:value or filterName:[value1,value2]
         const filterPairs = filtersParam.split(';');
         const parsedFilters = filterPairs.map(pair => {
           const [encodedName, valuesString] = pair.split(':');
           const name = decodeURIComponent(encodedName);
-          
+
           let values: string[];
           // Check if it's an array format [value1,value2]
           if (valuesString.startsWith('[') && valuesString.endsWith(']')) {
@@ -100,8 +107,8 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
             filterValue = values;
           } else if (group?.type === 'text') {
             // For text, return FilterOption array (single value for text inputs)
-            filterValue = values.length === 1 ? [{ value: values[0], label: values[0] }] : 
-                         values.map(value => ({ value, label: value }));
+            filterValue = values.length === 1 ? [{ value: values[0], label: values[0] }] :
+              values.map(value => ({ value, label: value }));
           } else {
             // For other types, find options with labels
             filterValue = values.map(value => {
@@ -123,21 +130,40 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
             });
           }
 
-          return {
+          if (group?.multiple && !valuesString.startsWith('[') && !valuesString.endsWith(']')) {
+            if (group.type === 'stringList') {
+              filterValue = values;
+            } else {
+              if (!Array.isArray(filterValue)) {
+                filterValue = [filterValue];
+              }
+            }
+          }
+
+          // Fallback: if group not found but we detected array format, assume it should be multiple
+          const shouldBeMultiple = group?.multiple || (!group && valuesString.startsWith('[') && valuesString.endsWith(']'));
+
+          const filter = {
             name,
             type: group?.type || 'select',
             placeholder: group?.placeholder,
             value: filterValue,
-            multiple: group?.multiple || false
+            multiple: shouldBeMultiple
           };
+
+          return filter;
         });
 
         setFilters(parsedFilters);
+        setHasInitialized(true);
       } catch (error) {
-        console.error("Failed to parse filters from URL:", error);
+        setHasInitialized(true);
       }
+    } else if (filterGroups.length > 0 && !hasInitialized) {
+      // No URL params but we have groups - mark as initialized
+      setHasInitialized(true);
     }
-  }, []);
+  }, [filterGroups, hasInitialized]);
 
   return (
     <FilterContext.Provider value={{ filters, setFilters, filterGroups }}>
@@ -287,7 +313,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
           {"Filter"}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[300px] p-0" align="start">
+      <PopoverContent className="w-[300px] p-0" align="start" sideOffset={4}>
         <Command>
           {
             filterGroups.find(group => group.name === selectedView)?.type === "select" && (
@@ -303,7 +329,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
               />
             )
           }
-          <CommandList className="max-h-[300px] overflow-y-auto">
+          <CommandList>
             <CommandGroup>
               {!selectedView ? getAvailableFilterGroups() : renderFilterOptions()}
             </CommandGroup>
@@ -316,7 +342,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
 
 const FilterBar = ({ className }: { className?: string }) => {
   const { filters, setFilters, filterGroups } = React.useContext(FilterContext);
-  
+
   return (
     <div className={cn(className)}>
       <Filters filters={filters} setFilters={setFilters} filterGroups={filterGroups} />
@@ -326,13 +352,13 @@ const FilterBar = ({ className }: { className?: string }) => {
 
 const FilterClear = ({ className }: { className?: string }) => {
   const { filters, setFilters } = React.useContext(FilterContext);
-  
+
   const hasActiveFilters = filters.filter((filter) => filter.value?.length > 0).length > 0;
-  
+
   if (!hasActiveFilters) {
     return null;
   }
-  
+
   return (
     <Button
       variant="outline"

package/src/core/components/shadcn/index.ts

@@ -20,3 +20,4 @@ export * from './command';
 export * from './checkbox';
 export * from './heading';
 export * from './text';
+export * from './resizeable';

package/src/core/components/shadcn/resizeable.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "../libs/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/src/core/components/shadcn/tabs.tsx

@@ -12,13 +12,15 @@ const TabsContext = React.createContext<{
   setTab?: (name: string) => void;
   responsive?: boolean;
   variant?: "tabs" | "pills";
+  updateHash?: boolean;
 }>({
   size: undefined,
   tabs: undefined,
   current: undefined,
   setTab: undefined,
   responsive: false,
-  variant: "tabs"
+  variant: "tabs",
+  updateHash: true
 });
 
 interface TabsProps {
@@ -31,6 +33,7 @@ interface TabsProps {
   onTabChange?: (tabName: string) => void;
   responsive?: boolean;
   variant?: "tabs" | "pills";
+  updateHash?: boolean;
 }
 
 const VTabs = ({
@@ -42,7 +45,8 @@ const VTabs = ({
   children,
   onTabChange,
   responsive = false,
-  variant = "tabs"
+  variant = "tabs",
+  updateHash = true
 }: TabsProps) => {
   // Initialize value
   const [value, setValue] = React.useState(() => {
@@ -99,6 +103,12 @@ const VTabs = ({
 
   const handleValueChange = (newValue: string) => {
     setValue(newValue);
+    
+    // Update the URL hash when tab changes (only if updateHash is true and not controlled by parent)
+    if (updateHash && !current) {
+      window.location.hash = newValue;
+    }
+    
     if (onTabChange) {
       onTabChange(newValue);
     }
@@ -109,7 +119,7 @@ const VTabs = ({
   }, [handleValueChange]);
 
   return (
-    <TabsContext.Provider value={{ tabs, size: fullWidth ? tabs.length : 0, current: value, setTab, responsive: responsive, variant }}>
+    <TabsContext.Provider value={{ tabs, size: fullWidth ? tabs.length : 0, current: value, setTab, responsive: responsive, variant, updateHash }}>
       <TabsPrimitive.Root
         defaultValue={value || tabs[0]?.name}
         value={value}
@@ -123,7 +133,7 @@ const VTabs = ({
 };
 
 const VTabsBar = ({ className }: { className?: string }) => {
-  const { tabs, size, current, setTab, responsive, variant } = React.useContext(TabsContext);
+  const { tabs, size, current, setTab, responsive, variant, updateHash } = React.useContext(TabsContext);
 
   const fullWidth = size !== 0;
 
@@ -132,13 +142,13 @@ const VTabsBar = ({ className }: { className?: string }) => {
 
     const tab = tabs.find(t => t.name === tabName);
 
-    if (tab?.href) {
+    if (tab?.href && updateHash) {
       window.history.pushState(null, '', tab.href);
     }
 
     setTab(tabName);
 
-  }, [tabs, setTab]);
+  }, [tabs, setTab, updateHash]);
 
   if (!tabs || !setTab) {
     console.warn("TabsBar: No tabs provided or setTab not available");

package/src/core/components/table/index.tsx

@@ -23,7 +23,7 @@ export function RowSkeleton({ columns }: { columns: number }) {
         <tr className="hover:bg-muted">
             {Array(columns).fill(0).map((_, index) =>
                 <td key={index}>
-                    <div className="animate-pulse rounded-xs h-5 bg-gray-200 dark:bg-gray-600"></div>
+                    <div className="animate-pulse rounded-xs h-5 bg-muted"></div>
                 </td>
             )}
         </tr>

package/src/features/facets/CollectionsFacetsNav.tsx

@@ -0,0 +1,94 @@
+import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import { useState } from 'react';
+import { SearchInterface } from './utils/SearchInterface';
+
+interface CollectionsFacetsNavProps {
+    facets: {
+        type?: any[];
+        dynamic?: any[];
+    };
+    search: SearchInterface;
+}
+
+// Hook to create filter groups for collections
+export function useCollectionsFilterGroups(facets: CollectionsFacetsNavProps['facets']): FilterGroup[] {
+    void facets;
+    const customFilterGroups: FilterGroup[] = [];
+
+    // Add name filter as text type
+    const nameFilterGroup = {
+        name: 'name',
+        placeholder: 'Name',
+        type: 'text' as const,
+        multiple: false
+    };
+    customFilterGroups.push(nameFilterGroup);
+
+    return customFilterGroups;
+}
+
+// Hook to create filter change handler for collections
+export function useCollectionsFilterHandler(search: SearchInterface) {
+    return (newFilters: BaseFilter[]) => {
+        if (newFilters.length === 0) {
+            // Clear filters without applying defaults - user wants to remove all filters
+            search.clearFilters(true);
+            return;
+        }
+
+        // Clear all filters first, then apply new ones
+        search.clearFilters(false);
+
+        newFilters.forEach(filter => {
+            if (filter.value && filter.value.length > 0) {
+                const filterName = filter.name;
+                let filterValue;
+                if (filter.type === 'stringList') {
+                    filterValue = filter.value.map(v => typeof v === 'string' ? v : v.value);
+                } else if (filter.multiple) {
+                    filterValue = Array.isArray(filter.value)
+                        ? filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v)
+                        : [typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value];
+                } else {
+                    // Single value - don't wrap in array
+                    filterValue = Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object'
+                        ? (filter.value[0] as any).value
+                        : Array.isArray(filter.value) && filter.value[0]
+                            ? filter.value[0]
+                            : filter.value;
+                }
+
+                search.query[filterName] = filterValue;
+            }
+        });
+
+        search.search();
+    };
+}
+
+// Component for collections filtering
+export function CollectionsFacetsNav({ facets, search }: CollectionsFacetsNavProps) {
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const filterGroups = useCollectionsFilterGroups(facets);
+    const handleFilterLogic = useCollectionsFilterHandler(search);
+
+    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
+        const newFilters = typeof value === 'function' ? value(filters) : value;
+        setFilters(newFilters);
+        handleFilterLogic(newFilters);
+    };
+
+    return (
+        <FilterProvider
+            filterGroups={filterGroups}
+            filters={filters}
+            setFilters={handleFilterChange}
+        >
+            <div className="flex gap-2 items-center">
+                <FilterBtn />
+                <FilterBar />
+                <FilterClear />
+            </div>
+        </FilterProvider>
+    );
+}

package/src/features/facets/DocumentsFacetsNav.tsx

@@ -1,9 +1,9 @@
 import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
 import { useUserSession } from '@vertesia/ui/session';
 import { useState } from 'react';
-import { VStringFacet } from './VStringFacet';
-import { VTypeFacet } from './VTypeFacet';
-import { SearchInterface } from './VFacetsNav';
+import { VStringFacet } from './utils/VStringFacet';
+import { VTypeFacet } from './utils/VTypeFacet';
+import { SearchInterface } from './utils/SearchInterface';
 
 interface DocumentsFacetsNavProps {
     facets: {
@@ -22,7 +22,14 @@ export function useDocumentFilterGroups(facets: DocumentsFacetsNavProps['facets'
     const customFilterGroups: FilterGroup[] = [];
 
     customFilterGroups.push({
-        placeholder: 'Name or ID',
+        placeholder: 'ID',
+        name: 'id',
+        type: 'text',
+        options: [],
+    });
+
+    customFilterGroups.push({
+        placeholder: 'Name',
         name: 'name',
         type: 'text',
         options: [],
@@ -94,7 +101,7 @@ export function useDocumentFilterHandler(search: SearchInterface) {
         newFilters.forEach(filter => {
             if (filter.value && filter.value.length > 0) {
                 const filterName = filter.name;
-                
+
                 let filterValue;
                 if (filter.type === 'date' && filter.multiple) {
                     // Handle date range filters
@@ -117,21 +124,25 @@ export function useDocumentFilterHandler(search: SearchInterface) {
                         }
                     }
                 } else if (filter.multiple) {
-                    filterValue = Array.isArray(filter.value) 
-                        ? filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v)
-                        : [typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value];
+                    if (Array.isArray(filter.value)) {
+                        filterValue = filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v);
+                    } else {
+                        const singleValue = typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value;
+                        filterValue = [singleValue];
+                    }
                 } else {
                     // Single value - don't wrap in array
                     filterValue = Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object'
                         ? (filter.value[0] as any).value
-                        : Array.isArray(filter.value) && filter.value[0] 
+                        : Array.isArray(filter.value) && filter.value[0]
                             ? filter.value[0]
                             : filter.value;
                 }
-                
+
                 if (filterName === 'name') {
-                    search.query.search_term = filterValue;
                     search.query.name = filterValue;
+                } else if (filterName === 'id') {
+                    search.query.id = filterValue;
                 } else {
                     search.query[filterName] = filterValue;
                 }

package/src/features/facets/EnvironmentFacet.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { FacetBucket, FacetNameBucket } from '@vertesia/common';
 import { SelectBox } from '@vertesia/ui/core';
 import { useUserSession } from '@vertesia/ui/session';
-import { facetOptionNameLabel } from './utils';
+import { facetOptionNameLabel } from './utils/utils';
 
 interface EnvironmentFacetProps {
     search: any;