@vertesia/ui 0.65.0 → 0.67.0

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

@@ -0,0 +1,46 @@
+import { ErrorBox, useFetch, VSelectBox } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+
+interface SelectCollectionProps {
+    value?: string; // Collection ID
+    onChange: (collectionId: string | undefined, collection?: any) => void;
+    disabled?: boolean;
+    className?: string;
+}
+
+/**
+ * A component to select a collection from a list of collections.
+ * It fetches the collections from the store and displays them in a dropdown.
+ * @param props - The properties for the component.
+ * @returns A dropdown to select a collection.
+ */
+export function SelectCollection({ onChange, value, disabled = false, className }: SelectCollectionProps) {
+    const { client } = useUserSession();
+    const { data: collections, error } = useFetch(() => client.store.collections.list({ dynamic: false }), []);
+
+    if (error) {
+        return <ErrorBox title='Collection fetch failed'>{error.message}</ErrorBox>
+    }
+
+    // Find the selected collection object from the ID
+    const selectedCollection = value ? collections?.find(col => col.id === value) : undefined;
+
+    const handleChange = (collection: any) => {
+        // Call onChange with both the ID and the full collection object
+        onChange(collection?.id, collection);
+    };
+
+    return (
+        <VSelectBox
+            filterBy={"name"}
+            value={selectedCollection}
+            onChange={handleChange}
+            placeholder="Select a collection"
+            options={collections || []}
+            optionLabel={(col: any) => col.name}
+            by="id"
+            className={className}
+            disabled={disabled}
+        />
+    );
+}

package/src/features/store/collections/index.ts

@@ -1,5 +1,5 @@
 export * from "./BrowseCollectionView";
 export * from "./CollectionsTable";
-export * from "./CollectionsView";
-export * from "./CollectionView";
 export * from "./EditCollectionView";
+export * from "./CreateCollection";
+export * from "./SelectCollection";

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

@@ -4,11 +4,14 @@ import { ColumnLayout, ContentObject, ContentObjectItem, VectorSearchQuery } fro
 import { Button, Divider, ErrorBox, SidePanel, Spinner, useDebounce, useIntersectionObserver, useToast } from '@vertesia/ui/core';
 import { useNavigate } from "@vertesia/ui/router";
 import { TypeRegistry, useUserSession } from '@vertesia/ui/session';
-import { Download, RefreshCw, SquareArrowOutUpRight } from 'lucide-react';
+import { Download, RefreshCw, Eye } from 'lucide-react';
 import { VFacetsNav } from "../../facets";
 import { VectorSearchWidget } from './components/VectorSearchWidget';
 
-import { ContentDispositionButton, DocumentTable, useDocumentSearch, useDocumentUploadHandler, useWatchDocumentSearchFacets, useWatchDocumentSearchResult } from "../../store";
+import { ContentDispositionButton } from './components/ContentDispositionButton';
+import { DocumentTable } from './DocumentTable';
+import { useDocumentSearch, useWatchDocumentSearchFacets, useWatchDocumentSearchResult } from './search/DocumentSearchContext';
+import { useDocumentUploadHandler } from './upload/useUploadHandler';
 import { ContentOverview } from './components/ContentOverview';
 import { useDownloadDocument } from './components/useDownloadObject';
 
@@ -192,7 +195,7 @@ function OverviewDrawer({ object, onClose }: OverviewDrawerProps) {
         <SidePanel title={object.properties?.title || object.name} isOpen={true} onClose={onClose}>
             <div className="flex items-center gap-x-2">
                 <Button variant="ghost" size="sm" title="Open Object" onClick={() => navigate(`/objects/${object.id}`)}>
-                    <SquareArrowOutUpRight className="size-4" />
+                    <Eye className="size-4" />
                 </Button>
                 {object.content?.source && (
                     <Button variant="ghost" size="sm" title="Download" onClick={onDownload}>

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

@@ -3,19 +3,22 @@ import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 import { useUserSession } from "@vertesia/ui/session";
-import { Button, Link, Spinner, useToast } from "@vertesia/ui/core";
+import { Button, Spinner, useToast } from "@vertesia/ui/core";
 import { JSONDisplay } from "@vertesia/ui/widgets";
 import { ContentObject, ImageRenditionFormat } from "@vertesia/common";
 import { Copy, Download, SquarePen } from "lucide-react";
 import { PropertiesEditorModal } from "./PropertiesEditorModal";
+import { NavLink } from "@vertesia/ui/router";
 
 interface ContentOverviewProps {
     object: ContentObject;
     loadText?: boolean;
+    refetch?: () => Promise<unknown>;
 }
 export function ContentOverview({
     object,
     loadText,
+    refetch,
 }: ContentOverviewProps) {
     const { client, store } = useUserSession();
     const [isLoadingText, setIsLoadingText] = useState(false);
@@ -144,7 +147,7 @@ export function ContentOverview({
     };
 
     const handleExportDocx = () => handleExportDocument("docx");
-    //const handleExportPdf = () => handleExportDocument("pdf");
+    const handleExportPdf = () => handleExportDocument("pdf");
 
     const content = object.content;
     const isImage =
@@ -295,6 +298,15 @@ export function ContentOverview({
                                         <Download className="h-4 w-4" />
                                         DOCX
                                     </Button>
+                                    <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        onClick={handleExportPdf}
+                                        className="flex items-center gap-2"
+                                    >
+                                        <Download className="h-4 w-4" />
+                                        PDF
+                                    </Button>
                                 </>
                             )}
                         </div>
@@ -303,64 +315,30 @@ export function ContentOverview({
                     {text ? (
                         <div className="border shadow-xs rounded-xs max-w-7xl">
                             {seemsMarkdown ? (
-                                <div className="prose prose-sm max-w-none prose-p:bg-transparent prose-p:my-0 prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900 prose-pre:my-2 prose-code:bg-gray-200/70 dark:prose-code:bg-gray-700/50 prose-headings:bg-transparent prose-li:bg-transparent dark:prose-invert dark:text-gray-100">
+                                <div className="vprose prose-sm p-1">
                                     <Markdown
                                         remarkPlugins={[remarkGfm]}
                                         components={{
-                                            a: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                href?: string;
-                                                children?: React.ReactNode;
-                                            }) => {
+                                            a: ({ node, ...props }: { node?: any; href?: string; children?: React.ReactNode }) => {
                                                 const href = props.href || "";
-                                                if (
-                                                    href.startsWith(
-                                                        "/store/objects/",
-                                                    )
-                                                ) {
+                                                if (href.includes("/store/objects/")) {
                                                     return (
-                                                        <Link
+                                                        <NavLink
+                                                            topLevelNav
                                                             href={href}
-                                                            className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+                                                            className="text-info"
                                                         >
                                                             {props.children}
-                                                        </Link>
+                                                        </NavLink>
                                                     );
                                                 }
-                                                return (
-                                                    <a
-                                                        {...props}
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                    />
-                                                );
+                                                return <a {...props} data-debug="test" target="_blank" rel="noopener noreferrer" />;
                                             },
-                                            p: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                children?: React.ReactNode;
-                                            }) => (
-                                                <p
-                                                    {...props}
-                                                    className="my-0 text-gray-800 dark:text-gray-100"
-                                                />
+                                            p: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                                <p {...props} className={`my-0`} />
                                             ),
-                                            pre: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                children?: React.ReactNode;
-                                            }) => (
-                                                <pre
-                                                    {...props}
-                                                    className="my-2 bg-gray-800 dark:bg-gray-900 p-2 rounded text-gray-100"
-                                                />
+                                            pre: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                                <pre {...props} className={`my-2 p-2 rounded`} />
                                             ),
                                             code: ({
                                                 node,
@@ -372,71 +350,32 @@ export function ContentOverview({
                                                 className?: string;
                                                 children?: React.ReactNode;
                                             }) => {
-                                                const match =
-                                                    /language-(\w+)/.exec(
-                                                        className || "",
-                                                    );
+                                                const match = /language-(\w+)/.exec(className || "");
                                                 const isInline = !match;
                                                 return (
                                                     <code
                                                         {...props}
                                                         className={
                                                             isInline
-                                                                ? "px-1.5 py-0.5 rounded text-muted bg-gray-200/70 dark:bg-gray-700/50"
-                                                                : "text-gray-100"
+                                                                ? `px-1.5 py-0.5 rounded`
+                                                                : "text-muted"
                                                         }
                                                     >
                                                         {children}
                                                     </code>
                                                 );
                                             },
-                                            h1: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                children?: React.ReactNode;
-                                            }) => (
-                                                <h1
-                                                    {...props}
-                                                    className="text-gray-900 dark:text-gray-50 font-bold text-2xl my-2"
-                                                />
+                                            h1: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                                <h1 {...props} className={`font-bold text-2xl my-2`} />
                                             ),
-                                            h2: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                children?: React.ReactNode;
-                                            }) => (
-                                                <h2
-                                                    {...props}
-                                                    className="text-gray-900 dark:text-gray-50 font-bold text-xl my-2"
-                                                />
+                                            h2: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                                <h2 {...props} className={`font-bold text-xl my-2`} />
                                             ),
-                                            h3: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                children?: React.ReactNode;
-                                            }) => (
-                                                <h3
-                                                    {...props}
-                                                    className="text-gray-900 dark:text-gray-50 font-bold text-lg my-2"
-                                                />
+                                            h3: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                                <h3 {...props} className={`font-bold text-lg my-2`} />
                                             ),
-                                            li: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                children?: React.ReactNode;
-                                            }) => (
-                                                <li
-                                                    {...props}
-                                                    className="text-gray-800 dark:text-gray-100"
-                                                />
+                                            li: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                                <li {...props} />
                                             ),
                                         }}
                                     >
@@ -460,6 +399,7 @@ export function ContentOverview({
                 isOpen={isPropertiesModalOpen}
                 onClose={handleClosePropertiesModal}
                 object={object}
+                refetch={refetch}
             />
         </div>
     );

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

@@ -3,27 +3,25 @@ import { ChangeEvent, useEffect, useState } from 'react'
 import { retrieveRendition } from '../../../utils'
 
 import { ContentObjectItem } from '@vertesia/common'
-import { Card, CardContent, Separator, VTooltip } from "@vertesia/ui/core"
-import { useNavigate } from "@vertesia/ui/router"
+import { Button, Card, CardContent, Separator, VTooltip } from "@vertesia/ui/core"
+import { NavLink } from "@vertesia/ui/router"
 import { useUserSession } from "@vertesia/ui/session"
 import { DocumentSelection } from '../DocumentSelectionProvider'
+import { Eye } from 'lucide-react'
 
 interface DocumentIconProps {
     document: ContentObjectItem
     onSelectionChange: ((object: ContentObjectItem, ev: ChangeEvent<HTMLInputElement>) => void);
     selection: DocumentSelection;
-
+    onRowClick?: (object: ContentObjectItem) => void;
 }
-export function DocumentIcon({ selection, document, onSelectionChange }: Readonly<DocumentIconProps>) {
+export function DocumentIcon({ selection, document, onSelectionChange, onRowClick }: Readonly<DocumentIconProps>) {
     const { client } = useUserSession()
-    const navigate = useNavigate()
 
     const [renditionUrl, setRenditionUrl] = useState<string | undefined>(undefined)
     const [renditionAlt, setRenditionAlt] = useState<string | undefined>(undefined)
+    const [renditionStatus, setRenditionStatus] = useState<string | undefined>(undefined)
 
-    const handleNavigateToDocument = () => {
-        navigate(`/objects/${document.id}`)
-    }
 
     const handleSelect = (ev: React.ChangeEvent<HTMLInputElement>) => {
         ev.stopPropagation()
@@ -35,13 +33,11 @@ export function DocumentIcon({ selection, document, onSelectionChange }: Readonl
             return
         }
 
-        retrieveRendition(client, document, setRenditionUrl, setRenditionAlt)
+        retrieveRendition(client, document, setRenditionUrl, setRenditionAlt, setRenditionStatus)
     }, [document])
 
-    console.log("renditionUrl", document)
-
     return (
-        <Card className="relative flex flex-col border h-fit" onClick={handleNavigateToDocument}>
+        <Card className="relative flex flex-col border h-fit" onClick={() => (onRowClick && onRowClick(document))}>
             {
                 selection && (
                     <div
@@ -56,11 +52,28 @@ export function DocumentIcon({ selection, document, onSelectionChange }: Readonl
                 )
             }
 
+            <div
+                className="absolute top-1 right-1 z-10 flex flex-col items-center"
+            >
+                <NavLink
+                    topLevelNav
+                    href={`/store/objects/${document.id}`}
+                >
+                    <Button
+                        variant="ghost" size="sm" title="Open Object"
+                    >
+                        <Eye className={`size-4 ${renditionStatus === 'ready' ? 'text-muted' : 'text-white'}`} />
+                    </Button>
+                </NavLink>
+            </div>
+
             {
-                renditionUrl ? (
+                (renditionUrl && renditionStatus == 'ready') ? (
                     <img src={renditionUrl} alt={renditionAlt} className="w-auto h-48 object-cover rounded-t-xl" />
                 ) : (
-                    <div className="h-48 bg-gray-700 rounded-t-xl"></div>
+                    <div className="h-48 bg-gray-700 rounded-t-xl flex items-center justify-center text-muted">
+                        {renditionStatus}
+                    </div>
                 )
             }
             <Separator className='bg-gray-200 h-[2px]' />

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

@@ -4,8 +4,7 @@ import { ChangeEvent, useEffect, useState } from 'react';
 import { useUserSession } from '@vertesia/ui/session';
 import { ContentObjectItem } from '@vertesia/common';
 import { ChevronsUpDown, X } from 'lucide-react';
-import { Button, Styles } from '@vertesia/ui/core';
-import { useFlag } from '@vertesia/ui/core';
+import { Button, Styles, useFlag } from '@vertesia/ui/core';
 import { Node } from '@vertesia/ui/widgets';
 
 import { SelectDocumentModal } from './SelectDocumentModal';

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

@@ -22,9 +22,10 @@ export interface PropertiesEditorModalProps {
     isOpen: boolean;
     onClose: () => void;
     object: ContentObject;
+    refetch?: () => Promise<unknown>;
 }
 
-export function PropertiesEditorModal({ isOpen, onClose, object }: PropertiesEditorModalProps) {
+export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: PropertiesEditorModalProps) {
     const { client, store } = useUserSession();
     const toast = useToast();
     const navigate = useNavigate();
@@ -169,8 +170,11 @@ export function PropertiesEditorModal({ isOpen, onClose, object }: PropertiesEdi
                     description: 'The object properties have been updated successfully.',
                     duration: 2000
                 });
-
-                // Close modals
+                
+                if (refetch) {
+                    await refetch();
+                }
+                
                 setShowConfirmation(false);
                 onClose();
             }

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

@@ -7,9 +7,9 @@ import {
     ModalTitle,
     Input,
     RadioGroup,
-    RadioOptionAdapter
+    RadioOptionAdapter,
+    FormItem
 } from '@vertesia/ui/core';
-import { FormItem } from '@vertesia/ui/core';
 
 export interface SaveVersionConfirmModalProps {
     isOpen: boolean;

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

@@ -1,11 +1,12 @@
 import { ColumnLayout, ContentObjectItem } from "@vertesia/common";
-import { ErrorBox, Spinner, useIntersectionObserver } from "@vertesia/ui/core";
+import { Button, ErrorBox, Spinner, useIntersectionObserver } from "@vertesia/ui/core";
 import { useEffect, useRef, useState } from "react";
 import { VFacetsNav } from "../../../facets";
 import { DocumentTable } from "../DocumentTable";
 import { useDocumentSearch, useWatchDocumentSearchFacets, useWatchDocumentSearchResult } from "../search/DocumentSearchContext";
 import { DocumentSearchProvider } from "../search/DocumentSearchProvider";
 import { ContentDispositionButton } from "./ContentDispositionButton";
+import { RefreshCw } from "lucide-react";
 
 const layout: ColumnLayout[] = [
     { "name": "Name", "field": "properties.title", "type": "string", "fallback": "name" },
@@ -33,15 +34,19 @@ export function SelectDocument({ onChange }: SelectDocumentProps) {
 interface SelectDocumentImplProps {
     onRowClick: (selected: ContentObjectItem) => void;
 }
+const LAST_DISPLAYED_VIEW = 'vertesia.content_store.lastDisplayedView'
+
 function SelectDocumentImpl({ onRowClick }: SelectDocumentImplProps) {
     const [isReady, setIsReady] = useState(false);
-    const [isGridView, setIsGridView] = useState(localStorage.getItem('lastDisplayedView') === 'grid');
+    const [isGridView, setIsGridView] = useState(localStorage.getItem(LAST_DISPLAYED_VIEW) === 'grid');
     const { search, isLoading, error, objects } = useWatchDocumentSearchResult();
 
     const loadMoreRef = useRef<HTMLDivElement>(null);
+
     useIntersectionObserver(loadMoreRef, () => {
         isReady && search.loadMore(true)
     }, { deps: [isReady] });
+
     useEffect(() => {
         search.search().then(() => setIsReady(true));
     }, []);
@@ -49,6 +54,11 @@ function SelectDocumentImpl({ onRowClick }: SelectDocumentImplProps) {
     const facets = useWatchDocumentSearchFacets();
     const facetSearch = useDocumentSearch();
 
+    const handleRefetch = () => {
+        setIsReady(false);
+        search.search().then(() => setIsReady(true));
+    }
+
     if (error) {
         return <ErrorBox title="Search failed">{error.message}</ErrorBox>
     }
@@ -57,7 +67,12 @@ function SelectDocumentImpl({ onRowClick }: SelectDocumentImplProps) {
         <div>
             <div className="flex justify-between items-center mb-4">
                 <VFacetsNav facets={facets} search={facetSearch} textSearch="Filter content" />
-                <ContentDispositionButton onUpdate={setIsGridView} />
+                <div className="flex items-center gap-2">
+                    <Button variant="outline" onClick={handleRefetch} alt="Refresh">
+                        <RefreshCw size={16} />
+                    </Button>
+                    <ContentDispositionButton onUpdate={setIsGridView} />
+                </div>
             </div>
             <DocumentTable objects={objects || []} isLoading={false} layout={layout} onRowClick={onRowClick} isGridView={isGridView} />
             <div ref={loadMoreRef} className='mt-10' />

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

@@ -1,5 +1,5 @@
 import { ContentObjectItem } from "@vertesia/common";
-import { Modal, ModalBody, ModalTitle } from "@vertesia/ui/core";
+import { VModal, VModalBody, VModalTitle } from "@vertesia/ui/core";
 import { SelectDocument } from "./SelectDocument";
 
 interface SelectDocumentModalProps {
@@ -10,11 +10,11 @@ interface SelectDocumentModalProps {
 }
 export function SelectDocumentModal({ isOpen, onClose }: SelectDocumentModalProps) {
     return (
-        <Modal onClose={() => onClose()} isOpen={!!isOpen} className='min-w-[60vw]'>
-            <ModalTitle>Select Content</ModalTitle>
-            <ModalBody className='p-4 pt-0 overflow-y-auto max-h-[80vh] min-h-[80vh]'>
+        <VModal onClose={() => onClose()} isOpen={!!isOpen} className='min-w-[60vw]'>
+            <VModalTitle>Select Content</VModalTitle>
+            <VModalBody className='pt-0 overflow-y-auto max-h-[80vh] min-h-[80vh]'>
                 {isOpen && <SelectDocument onChange={onClose} />}
-            </ModalBody>
-        </Modal>
+            </VModalBody>
+        </VModal>
     )
 }

package/src/features/store/objects/layout/documentLayout.tsx

@@ -52,7 +52,7 @@ export function DocumentTableView({ objects, selection, isLoading, onRowClick, c
     )
 }
 
-export function DocumentGridView({ objects, selection, isLoading, onSelectionChange }: ViewProps) {
+export function DocumentGridView({ objects, selection, isLoading, onSelectionChange, onRowClick }: ViewProps) {
 
     return (
         <>
@@ -61,7 +61,7 @@ export function DocumentGridView({ objects, selection, isLoading, onSelectionCha
             </div>
             <div className="w-full gap-2 grid lg:grid-cols-6">
                 {objects.map((document) => (
-                    <DocumentIcon key={document.id} document={document} selection={selection} onSelectionChange={onSelectionChange} />
+                    <DocumentIcon key={document.id} document={document} selection={selection} onSelectionChange={onSelectionChange} onRowClick={onRowClick} />
                 ))}
             </div>
         </>

package/src/features/store/objects/search/DocumentSearchContext.ts

@@ -3,6 +3,7 @@ import { createContext, useContext } from 'react';
 import { SharedState, useWatchSharedState } from '@vertesia/ui/core';
 import { ComputeFacetsResponse, ZenoClient } from '@vertesia/client';
 import { ComplexSearchQuery, ContentObjectItem, FacetBucket, FacetSpec, ObjectSearchQuery } from '@vertesia/common';
+import { SearchInterface } from '@vertesia/ui/features'
 
 interface DocumentSearchResult {
     objects: ContentObjectItem[],
@@ -11,7 +12,7 @@ interface DocumentSearchResult {
 }
 
 
-export class DocumentSearch {
+export class DocumentSearch implements SearchInterface {
 
     collectionId?: string;
     facets = new SharedState<ComputeFacetsResponse>({});
@@ -49,13 +50,15 @@ export class DocumentSearch {
         this.search();
     }
 
-    clearFilters() {
+    clearFilters(autoSearch: boolean = true) {
         const parent = this.query.parent;
         this.query = {
             parent
         };
 
-        this.search();
+        if (autoSearch) {
+            this.search();
+        }
     }
 
     getFacetBuckets(name: string): FacetBucket[] {

package/src/features/store/objects/selection/ObjectsActionContext.tsx

@@ -193,4 +193,4 @@ export function useStartWorkflowCallback(cb: ObjectsActionCallback) {
         }
     }, [cb, ctx]);
     return ctx;
-}
+}

package/src/features/store/objects/selection/SelectionActions.tsx

@@ -28,7 +28,6 @@ export function SelectionActions() {
                     <div className="flex items-center gap-x-1 shrink-0">
                         <div className='text-sm nowrap'>{size} document{plural} selected</div>
                         <Button title="Clear selection" variant={"ghost"}
-                            className=" rounded-md p-2"
                             onClick={onClearSelection}>
                             <X className="size-4" />
                         </Button>

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

@@ -1,7 +1,7 @@
-import { Button, ErrorBox, Portal, useFetch, useToast, VModal, VModalBody, VModalFooter, VModalTitle, VSelectBox } from "@vertesia/ui/core";
+import { Button, Portal, useToast, VModal, VModalBody, VModalFooter, VModalTitle } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { useCallback, useState } from "react";
-import { CreateCollectionForm } from "../../../collections";
+import { CreateCollectionForm, SelectCollection } from "../../../collections";
 import { useObjectsActionCallback } from "../ObjectsActionContext";
 import { ActionComponentTypeProps, ObjectsActionSpec } from "../ObjectsActionSpec";
 
@@ -43,7 +43,7 @@ function SelectCollectionModal({ isOpen, onClose, objectIds }: SelectCollectionM
     return (
         <VModal isOpen={isOpen} onClose={onClose}>
             <VModalTitle>Add to a Collection</VModalTitle>
-            <AddToCollectionForm onClose={onClose} objectIds={objectIds} />
+            <AddToCollectionForm onClose={onClose} objectIds={objectIds}/>
         </VModal>
     )
 }
@@ -55,8 +55,7 @@ interface AddToCollectionFormProps {
 function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
     const toast = useToast();
     const { client } = useUserSession();
-    const [selectedCol, setSelectedCol] = useState<any>();
-    const { data: collections, error } = useFetch(() => client.store.collections.list({ dynamic: false }), []);
+    const [selectedCollectionId, setSelectedCollectionId] = useState<string>();
     const onAddToCollection = ({ collectionId }: { collectionId: string }) => {
         if (!collectionId || !objectIds?.length) {
             return;
@@ -78,28 +77,18 @@ function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
             });
         });
     }
-    if (error) {
-        return <ErrorBox title='Collection fetch failed'>{error.message}</ErrorBox>
-    }
+
+    const onCollectionChange = (collectionId: string | undefined) => {
+        setSelectedCollectionId(collectionId);
+    };
 
     return (
         <>
             <VModalBody>
-                <VSelectBox
-                    filterBy={"name"}
-                    value={selectedCol}
-                    onChange={(collection) => {
-                        setSelectedCol(collection);
-                    }}
-                    placeholder="Select a collection"
-                    options={collections || []}
-                    optionLabel={(col: any) => col.name}
-                    by="id"
-                    className="mb-4"
-                />
+                <SelectCollection onChange={onCollectionChange} value={selectedCollectionId}  className="mb-4"/>
             </VModalBody>
             <VModalFooter>
-                <Button isDisabled={!selectedCol} onClick={() => selectedCol && onAddToCollection({ collectionId: selectedCol.id })}>
+                <Button isDisabled={!selectedCollectionId} onClick={() => selectedCollectionId && onAddToCollection({ collectionId: selectedCollectionId })}>
                     Add to Collection
                 </Button>
             </VModalFooter>