@vertesia/ui 0.67.0 → 0.69.0

package/src/features/store/collections/EditCollectionView.tsx

@@ -128,8 +128,24 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                     onChange={(e) => setField("description", e.target.value)}
                 />
             </FormItem>
+            {
+                !collection.dynamic &&
+                <FormItem label="Allowed Content Types" description="Select which content types can be added to the collection. If not set, then all content types are allowed.">
+                    <SelectContentType
+                        defaultValue={metadata.allowed_types || null}
+                        onChange={(v) => {
+                            if (Array.isArray(v)) {
+                                setField("allowed_types", v.map(type => type.id));
+                            } else {
+                                setField("allowed_types", v ? [v.id] : []);
+                            }
+                        }}
+                        isClearable multiple
+                    />
+                </FormItem>
+            }
             {collection.dynamic && (
-                <FormItem label="Query" description="Define the query to fetch dynamic content for this collection.">
+                <FormItem label="Query" description="Define the query to dynamically fetch content for the collection.">
                     <textarea
                         className={Styles.INPUT}
                         value={metadata.query}
@@ -137,11 +153,11 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                     />
                 </FormItem>
             )}
-            <FormItem label="Table Layout" description="Define how the collection should be displayed in tables.">
+            <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables.">
                 <CodeMirrorEditor className="border-1 rounded-md border-border"
                     value={tableLayoutValue} extensions={extensions} editorRef={tableLayoutRef} />
             </FormItem>
-            <FormItem label="Type">
+            <FormItem label="Type" description="Select a content type to assign custom properties and data to the collection.">
                 <SelectContentType
                     defaultValue={metadata.type || null}
                     onChange={(v) => {
@@ -154,19 +170,6 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                     isClearable
                 />
             </FormItem>
-            <FormItem label="Allowed Content Types">
-                <SelectContentType
-                    defaultValue={metadata.allowed_types || null}
-                    onChange={(v) => {
-                        if (Array.isArray(v)) {
-                            setField("allowed_types", v.map(type => type.id));
-                        } else {
-                            setField("allowed_types", v ? [v.id] : []);
-                        }
-                    }}
-                    isClearable multiple
-                />
-            </FormItem>
             <Button size="lg" className="w-min my-4" isDisabled={isUpdating} onClick={onSubmit}>
                 Save Metadata
             </Button>

package/src/features/store/collections/SelectCollection.tsx

@@ -16,7 +16,7 @@ interface SelectCollectionProps {
  */
 export function SelectCollection({ onChange, value, disabled = false, className }: SelectCollectionProps) {
     const { client } = useUserSession();
-    const { data: collections, error } = useFetch(() => client.store.collections.list({ dynamic: false }), []);
+    const { data: collections, error } = useFetch(() => client.store.collections.search({ dynamic: false }), []);
 
     if (error) {
         return <ErrorBox title='Collection fetch failed'>{error.message}</ErrorBox>

package/src/features/store/objects/DocumentPreviewPanel.tsx

@@ -102,7 +102,6 @@ export function DocumentPreviewPanel({
     try {
       // Try to get a rendition first
       const rendition = await client.objects.getRendition(obj.id, {
-        max_hw: 1024,
         format: ImageRenditionFormat.jpeg,
         generate_if_missing: false,
       });

package/src/features/store/objects/DocumentSearchResults.tsx

@@ -5,7 +5,8 @@ import { Button, Divider, ErrorBox, SidePanel, Spinner, useDebounce, useIntersec
 import { useNavigate } from "@vertesia/ui/router";
 import { TypeRegistry, useUserSession } from '@vertesia/ui/session';
 import { Download, RefreshCw, Eye } from 'lucide-react';
-import { VFacetsNav } from "../../facets";
+import { FilterProvider, FilterBtn, FilterBar, FilterClear, Filter as BaseFilter } from '@vertesia/ui/core';
+import { useDocumentFilterGroups, useDocumentFilterHandler } from "../../facets/DocumentsFacetsNav";
 import { VectorSearchWidget } from './components/VectorSearchWidget';
 
 import { ContentDispositionButton } from './components/ContentDispositionButton';
@@ -97,6 +98,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     const [refreshTrigger, _setRefreshTrigger] = useState(0);
     const [loaded, setLoaded] = useState(0);
     const [isGridView, setIsGridView] = useState(localStorage.getItem(ContentDispositionButton.LAST_DISPLAYED_VIEW) === "grid");
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
 
     const loadMoreRef = useRef<HTMLDivElement>(null);
     useIntersectionObserver(loadMoreRef, () => {
@@ -148,22 +150,89 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
         search.search().then(() => setIsReady(true));
     };
 
+    // Use DocumentsFacetsNav hooks for cleaner organization
+    const filterGroups = useDocumentFilterGroups(facets);
+    const handleFilterLogic = useDocumentFilterHandler(facetSearch);
+
+    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
+        const newFilters = typeof value === 'function' ? value(filters) : value;
+        setFilters(newFilters);
+        handleFilterLogic(newFilters);
+    };
+
+    const url = new URL(window.location.href);
+    const filtersParam = url.searchParams.get('filters');
+
+    if (filtersParam) {
+        try {
+            const filterPairs = filtersParam.split(';');
+            const validFilterPairs = filterPairs.filter(pair => {
+                const [encodedName] = pair.split(':');
+                const name = decodeURIComponent(encodedName);
+                return name !== 'start' && name !== 'end';
+            });
+
+            if (validFilterPairs.length !== filterPairs.length) {
+                const newFiltersParam = validFilterPairs.length > 0 ? validFilterPairs.join(';') : '';
+                if (newFiltersParam) {
+                    url.searchParams.set('filters', newFiltersParam);
+                } else {
+                    url.searchParams.delete('filters');
+                }
+                window.history.replaceState({}, '', url.toString());
+            }
+        } catch (error) {
+            console.error("Failed to clean start/end filters from URL:", error);
+        }
+    }
+
     return (
         <div className="flex flex-col gap-y-2">
             <OverviewDrawer object={selectedObject} onClose={() => setSelectedObject(null)} />
             {
                 error && <ErrorBox title="Error">{error.message}</ErrorBox>
             }
-            <div className="flex flex-row gap-4 items-center justify-between w-full">
-                {
-                    allowSearch && <VectorSearchWidget onChange={setVQuery} isLoading={isLoading} refresh={refreshTrigger} />
-                }
-                <div className="flex gap-1 items-center">
-                    <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
-                    <ContentDispositionButton onUpdate={setIsGridView} />
-                </div>
-            </div>
-            {allowFilter && <VFacetsNav facets={facets} search={facetSearch} textSearch={"Name or ID"} />}
+            {
+                allowFilter && (
+                    <FilterProvider
+                        filterGroups={filterGroups}
+                        filters={filters}
+                        setFilters={handleFilterChange}
+                    >
+                        <div className="flex flex-row gap-4 items-center justify-between w-full">
+                            <div className="flex gap-2 items-center w-2/3">
+                                {
+                                    allowSearch && <VectorSearchWidget onChange={setVQuery} isLoading={isLoading} refresh={refreshTrigger} className="w-wull" />
+                                }
+                                <FilterBtn />
+                            </div>
+                            <div className="flex gap-1 items-center">
+                                <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
+                                <ContentDispositionButton onUpdate={setIsGridView} />
+                            </div>
+                        </div>
+                        <div className="flex gap-2 items-center">
+                            <FilterBar />
+                            <FilterClear />
+                        </div>
+                    </FilterProvider>
+                )
+            }
+            {
+                !allowFilter && (
+                    <div className="flex flex-row gap-4 items-center justify-between w-full">
+                        <div className="flex gap-2 items-center w-2/3">
+                            {
+                                allowSearch && <VectorSearchWidget onChange={setVQuery} isLoading={isLoading} refresh={refreshTrigger} />
+                            }
+                        </div>
+                        <div className="flex gap-1 items-center">
+                            <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
+                            <ContentDispositionButton onUpdate={setIsGridView} />
+                        </div>
+                    </div>
+                )
+            }
             <DocumentTable
                 objects={objects}
                 isLoading={!objects.length && isLoading}

package/src/features/store/objects/components/ContentOverview.tsx

@@ -83,7 +83,6 @@ export function ContentOverview({
             // Request document rendition from the server
             const response = await client.objects.getRendition(object.id, {
                 format: format as any, // We're extending the format type
-                max_hw: 1024, // Not used for document exports but required by API
                 generate_if_missing: true,
                 sign_url: true,
             });
@@ -172,7 +171,6 @@ export function ContentOverview({
         if (isImage) {
             client.objects
                 .getRendition(object.id, {
-                    max_hw: 1024,
                     format: ImageRenditionFormat.jpeg,
                     generate_if_missing: false,
                     sign_url: true,

package/src/features/store/objects/components/SelectDocument.tsx

@@ -1,7 +1,7 @@
 import { ColumnLayout, ContentObjectItem } from "@vertesia/common";
 import { Button, ErrorBox, Spinner, useIntersectionObserver } from "@vertesia/ui/core";
 import { useEffect, useRef, useState } from "react";
-import { VFacetsNav } from "../../../facets";
+import { DocumentsFacetsNav } from "../../../facets";
 import { DocumentTable } from "../DocumentTable";
 import { useDocumentSearch, useWatchDocumentSearchFacets, useWatchDocumentSearchResult } from "../search/DocumentSearchContext";
 import { DocumentSearchProvider } from "../search/DocumentSearchProvider";
@@ -66,7 +66,7 @@ function SelectDocumentImpl({ onRowClick }: SelectDocumentImplProps) {
     return (
         <div>
             <div className="flex justify-between items-center mb-4">
-                <VFacetsNav facets={facets} search={facetSearch} textSearch="Filter content" />
+                <DocumentsFacetsNav facets={facets} search={facetSearch} />
                 <div className="flex items-center gap-2">
                     <Button variant="outline" onClick={handleRefetch} alt="Refresh">
                         <RefreshCw size={16} />

package/src/features/store/objects/components/VectorSearchWidget.tsx

@@ -107,8 +107,8 @@ export function VectorSearchWidget({ onChange, isLoading, refresh }: VectorSearc
     };
 
     return (
-        <div className="flex gap-1 items-center w-full">
-            <Input placeholder="Type what you are looking for" value={searchText} onChange={setSearchText} onKeyDown={handleKeyPress} />
+        <div className="flex gap-1 items-center w-1/2">
+            <Input placeholder="Type what you are looking for, or select a filter" value={searchText} onChange={setSearchText} onKeyDown={handleKeyPress} />
             <Button variant="secondary" isLoading={isLoading} onClick={() => fireSearch("text")} isDisabled={!isReady} alt="semantic search">Search</Button>
         </div>
     );

package/src/features/store/objects/selection/actions/AddToCollectionAction.tsx

@@ -1,4 +1,4 @@
-import { Button, Portal, useToast, VModal, VModalBody, VModalFooter, VModalTitle } from "@vertesia/ui/core";
+import { Button, DialogDescription, Heading, Portal, useToast, VModal, VModalBody, VModalFooter, VModalTitle, VTabs, VTabsBar, VTabsPanel } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { useCallback, useState } from "react";
 import { CreateCollectionForm, SelectCollection } from "../../../collections";
@@ -42,8 +42,13 @@ interface SelectCollectionModalProps {
 function SelectCollectionModal({ isOpen, onClose, objectIds }: SelectCollectionModalProps) {
     return (
         <VModal isOpen={isOpen} onClose={onClose}>
-            <VModalTitle>Add to a Collection</VModalTitle>
-            <AddToCollectionForm onClose={onClose} objectIds={objectIds}/>
+            <VModalTitle className="flex flex-col">
+                Add to a Collection
+            </VModalTitle>
+            <DialogDescription>
+                Add the selected objects to an existing collection or create a new one.
+            </DialogDescription>
+            <AddToCollectionForm onClose={onClose} objectIds={objectIds} />
         </VModal>
     )
 }
@@ -82,22 +87,38 @@ function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
         setSelectedCollectionId(collectionId);
     };
 
+    const tabs = [
+        {
+            name: 'select',
+            label: 'Select Collection',
+            content: (
+                <div className="p-4">
+                    <Heading level={5}>Choose from existing collections</Heading>
+                    <VModalBody>
+                        <SelectCollection onChange={onCollectionChange} value={selectedCollectionId} className="mb-4" />
+                    </VModalBody>
+                    <VModalFooter>
+                        <Button isDisabled={!selectedCollectionId} onClick={() => selectedCollectionId && onAddToCollection({ collectionId: selectedCollectionId })}>
+                            Add to Collection
+                        </Button>
+                    </VModalFooter>
+                </div>
+            )
+        },
+        {
+            name: 'create',
+            label: 'Create new',
+            content:
+                <div className="p-4">
+                    <CreateCollectionForm onClose={onClose} onAddToCollection={(id: string) => onAddToCollection({ collectionId: id })} redirect={false} />
+                </div>
+        }
+    ];
+
     return (
-        <>
-            <VModalBody>
-                <SelectCollection onChange={onCollectionChange} value={selectedCollectionId}  className="mb-4"/>
-            </VModalBody>
-            <VModalFooter>
-                <Button isDisabled={!selectedCollectionId} onClick={() => selectedCollectionId && onAddToCollection({ collectionId: selectedCollectionId })}>
-                    Add to Collection
-                </Button>
-            </VModalFooter>
-            <div className="flex items-center flex-row w-full text-muted">
-                <hr className="w-full" />
-                <div className="px-2 text-xs">OR</div>
-                <hr className="w-full" />
-            </div>
-            <CreateCollectionForm onClose={onClose} onAddToCollection={(id: string) => onAddToCollection({ collectionId: id })} redirect={false} />
-        </>
+        <VTabs defaultValue="select" tabs={tabs} fullWidth>
+            <VTabsBar />
+            <VTabsPanel />
+        </VTabs>
     )
 }