@vertesia/ui 1.0.0-dev.20260227.112605Z → 1.0.0-dev.20260331.091034Z

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

@@ -1,4 +1,4 @@
-import { Check, ChevronsUpDown } from "lucide-react";
+import { Check, ChevronsUpDown, X } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 
 import { CollectionItem } from "@vertesia/common";
@@ -8,6 +8,7 @@ import {
     Command, CommandEmpty, CommandGroup, CommandItem, CommandInput
 } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
+import { useUITranslation } from '../../../i18n/index.js';
 
 /**
  * A component to select a collection from a list of collections.
@@ -26,8 +27,11 @@ interface SelectCollectionProps {
     multiple?: boolean;
 }
 
-export function SelectCollection({ onChange, value, disabled = false, placeholder = "Select a collection", searchPlaceholder = "Search collections", filterOut, allowDynamic = true, multiple = false }: SelectCollectionProps) {
+export function SelectCollection({ onChange, value, disabled = false, placeholder, searchPlaceholder, filterOut, allowDynamic = true, multiple = false }: SelectCollectionProps) {
     const { client } = useUserSession();
+    const { t } = useUITranslation();
+    const resolvedPlaceholder = placeholder ?? t('store.selectACollection');
+    const resolvedSearchPlaceholder = searchPlaceholder ?? t('store.searchCollections');
 
     const [searchQuery, setSearchQuery] = useState('');
     const [isSearching, setIsSearching] = useState(false);
@@ -126,12 +130,33 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
         return collections.filter(col => col.name.toLowerCase().includes(queryLower));
     }, [collections, useServerSearch, hasSearchQuery, searchQuery]);
 
-    const showClearOption = selectedCollection && hasSearchQuery;
+    const showClearOption = multiple
+        ? Array.isArray(selectedCollection) && selectedCollection.length > 0
+        : !!selectedCollection;
+
+    const renderTrailingIcon = () => {
+        if (showClearOption) {
+            return (
+                <span
+                    role="button"
+                    aria-label="Clear selection"
+                    className="ml-2 shrink-0 opacity-50 hover:opacity-100 hover:text-destructive cursor-pointer"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        handleClear();
+                    }}
+                >
+                    <X className="h-4 w-4" />
+                </span>
+            );
+        }
+        return <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />;
+    };
 
     // Show error state
     if (error) {
         return (
-            <ErrorBox title="Collection fetch failed">
+            <ErrorBox title={t('store.collectionFetchFailed')}>
                 {error.message}
             </ErrorBox>
         );
@@ -143,11 +168,11 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
             if (selectedCollection.length === 1) {
                 return selectedCollection[0].name;
             }
-            return `${selectedCollection.length} collections selected`;
+            return t('store.collectionsSelected', { count: selectedCollection.length });
         } else if (!multiple && selectedCollection && !Array.isArray(selectedCollection)) {
             return selectedCollection.name;
         }
-        return placeholder;
+        return resolvedPlaceholder;
     };
 
     return (
@@ -163,14 +188,14 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
                     <span className="truncate flex-1 text-left min-w-0">
                         {getDisplayText()}
                     </span>
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    {renderTrailingIcon()}
                 </Button>
             </PopoverTrigger>
             <PopoverContent className="mt-2 mb-2 w-[var(--radix-popover-trigger-width)] p-0" align="start">
                 <Command shouldFilter={false}>
                     <div className="flex justify-between items-center border-b px-3" cmdk-input-wrapper="">
                         <CommandInput
-                            placeholder={searchPlaceholder}
+                            placeholder={resolvedSearchPlaceholder}
                             value={searchQuery}
                             onValueChange={handleSearchChange}
                             className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
@@ -184,21 +209,32 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
                     <CommandEmpty>
                         {
                             isSearching
-                                ? "Searching..."
+                                ? t('store.searching')
                                 : hasSearchQuery
-                                    ? "No collections found."
-                                    : "No collections available."
+                                    ? t('store.noCollectionsFound')
+                                    : t('store.noCollectionsAvailable')
                         }
                     </CommandEmpty>
                     <CommandGroup className="max-h-[300px] overflow-auto">
                         {
-                            showClearOption && !multiple && (
+                            showClearOption && !hasSearchQuery && (
                                 <CommandItem
                                     value="__clear__"
                                     onSelect={handleClear}
-                                    className="text-muted-foreground"
+                                    className="text-destructive"
+                                >
+                                    Remove collection selection(s)
+                                </CommandItem>
+                            )
+                        }
+                        {
+                            hasSearchQuery && (
+                                <CommandItem
+                                    value="__clear_search__"
+                                    onSelect={() => setSearchQuery("")}
+                                    className="text-muted"
                                 >
-                                    Clear selection
+                                    {t('store.clearSelection')}
                                 </CommandItem>
                             )
                         }

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

@@ -2,6 +2,7 @@ import { Collection, ContentObjectType } from "@vertesia/common";
 import { Button, Panel, TagsInput, useToast } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { useEffect, useState } from "react";
+import { useUITranslation } from '../../../i18n/index.js';
 
 interface SharedPropsEditorProps {
     collection: Collection;
@@ -9,6 +10,7 @@ interface SharedPropsEditorProps {
 export function SharedPropsEditor({ collection }: SharedPropsEditorProps) {
 
     const { client } = useUserSession();
+    const { t } = useUITranslation();
     const [colType, setColType] = useState<ContentObjectType | undefined>(undefined);
     const [sharedProps, setSharedProps] = useState<string[]>(collection.shared_properties || []);
     const toast = useToast();
@@ -31,12 +33,12 @@ export function SharedPropsEditor({ collection }: SharedPropsEditorProps) {
         }).then(() => {
             // Handle success
             toast({
-                title: "Updated shared properties",
+                title: t('store.updatedSharedProperties'),
                 status: "success"
             })
         }).catch((error) => {
             toast({
-                title: "Failed to update shared properties",
+                title: t('store.failedToUpdateSharedProperties'),
                 description: error.message,
                 status: "error"
             })
@@ -45,14 +47,14 @@ export function SharedPropsEditor({ collection }: SharedPropsEditorProps) {
     }
 
     return (
-        <Panel title="Shared Properties" description="Add properties to share across all members in the collection. This feature requires to enable shared property synchronization on the project."
+        <Panel title={t('store.sharedProperties')} description={t('store.sharedPropertiesDescription')}
             action={
                 <Button size="lg" isLoading={false} onClick={onSave}>
-                    Save
+                    {t('modal.save')}
                 </Button>}
         >
             <div className=''>
-                <TagsInput value={sharedProps} onChange={onSelect} options={options} placeholder="Select properties to share" />
+                <TagsInput value={sharedProps} onChange={onSelect} options={options} placeholder={t('store.selectPropertiesToShare')} />
             </div>
         </Panel>
     )

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

@@ -2,6 +2,7 @@ import { Collection } from "@vertesia/common";
 import { Panel, Switch, useToast } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { useState } from "react";
+import { useUITranslation } from '../../../i18n/index.js';
 
 interface SyncMemberHeadsToggleProps {
     collection: Collection;
@@ -9,6 +10,7 @@ interface SyncMemberHeadsToggleProps {
 export function SyncMemberHeadsToggle({ collection }: SyncMemberHeadsToggleProps) {
 
     const { client } = useUserSession();
+    const { t } = useUITranslation();
     const [skipHeadSync, setSkipHeadSync] = useState<boolean>(collection.skip_head_sync ?? false);
     const [isSaving, setIsSaving] = useState<boolean>(false);
     const toast = useToast();
@@ -21,13 +23,13 @@ export function SyncMemberHeadsToggle({ collection }: SyncMemberHeadsToggleProps
         }).then(() => {
             // Handle success
             toast({
-                title: "Updated skip head sync setting",
+                title: t('store.updatedSkipHeadSync'),
                 status: "success"
             })
             setSkipHeadSync(skip_head_sync);
         }).catch((error) => {
             toast({
-                title: "Failed to update skip head sync",
+                title: t('store.failedToUpdateSkipHeadSync'),
                 description: error.message,
                 status: "error"
             })
@@ -38,9 +40,9 @@ export function SyncMemberHeadsToggle({ collection }: SyncMemberHeadsToggleProps
     }
 
     return (
-        <Panel title="Synchronize Member Heads" description="When a new HEAD version of a member is created the colleciton will be updated to point to the new HEAD.">
+        <Panel title={t('store.syncMemberHeads')} description={t('store.syncMemberHeadsDescription')}>
             <Switch disabled={isSaving} value={!skipHeadSync} onChange={onSaveSkipHeadSync}>
-                Enable synchronizing member heads
+                {t('store.enableSyncMemberHeads')}
             </Switch>
         </Panel>
     )

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

@@ -16,6 +16,7 @@ import {
   X,
 } from "lucide-react";
 import { useEffect, useState } from "react";
+import { useUITranslation } from '../../../i18n/index.js';
 
 interface DocumentPreviewPanelProps {
   objectId: string | null;
@@ -36,6 +37,7 @@ export function DocumentPreviewPanel({
   const [text, setText] = useState<string | undefined>();
   const [imageUrl, setImageUrl] = useState<string | undefined>();
   const [currentTab, setCurrentTab] = useState("preview");
+  const { t } = useUITranslation();
   const toast = useToast();
 
   useEffect(() => {
@@ -67,8 +69,8 @@ export function DocumentPreviewPanel({
         .catch((error) => {
           console.error("Error loading object:", error);
           toast({
-            title: "Error",
-            description: "Failed to load document",
+            title: t('agent.error'),
+            description: t('store.failedToLoadDocument'),
             status: "error",
             duration: 3000,
           });
@@ -145,8 +147,8 @@ export function DocumentPreviewPanel({
           <FileText className="h-5 w-5 text-indigo-600 mr-2" />
           <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200 truncate">
             {isLoading
-              ? "Loading document..."
-              : object?.name || "Document Preview"}
+              ? t('store.loadingDocument')
+              : object?.name || t('store.documentPreview')}
           </h2>
         </div>
         <div className="flex items-center space-x-2">
@@ -157,7 +159,7 @@ export function DocumentPreviewPanel({
             className="flex items-center gap-1 text-indigo-600 hover:text-indigo-800"
           >
             <Maximize2 className="h-4 w-4" />
-            <span>Full View</span>
+            <span>{t('store.fullView')}</span>
           </Button>
           <Button
             variant="ghost"
@@ -179,7 +181,7 @@ export function DocumentPreviewPanel({
               className="text-indigo-600 dark:text-indigo-400 mb-2"
             />
             <p className="text-gray-600 dark:text-gray-400">
-              Loading document...
+              {t('store.loadingDocument')}
             </p>
           </div>
         </div>
@@ -197,7 +199,7 @@ export function DocumentPreviewPanel({
               >
                 <div className="flex items-center gap-1">
                   <LayoutGrid className="h-4 w-4" />
-                  <span>Preview</span>
+                  <span>{t('store.preview')}</span>
                 </div>
               </button>
               <button
@@ -209,7 +211,7 @@ export function DocumentPreviewPanel({
               >
                 <div className="flex items-center gap-1">
                   <Info className="h-4 w-4" />
-                  <span>Properties</span>
+                  <span>{t('store.properties')}</span>
                 </div>
               </button>
             </div>
@@ -268,13 +270,13 @@ export function DocumentPreviewPanel({
                   <div className="flex flex-col items-center justify-center h-64 border border-gray-200 dark:border-gray-700 rounded-md p-4 bg-gray-50 dark:bg-gray-800">
                     <FileText className="h-16 w-16 text-indigo-300 dark:text-indigo-400 mb-4" />
                     <p className="text-gray-600 dark:text-gray-400 text-center mb-4">
-                      PDF document preview is available in full view. TODO{" "}
+                      {t('store.pdfPreviewFullView')}
                     </p>
                     <Button
                       onClick={handleViewFullDocument}
                       className="bg-indigo-600 hover:bg-indigo-700 text-white"
                     >
-                      Open Full Document View
+                      {t('store.openFullDocumentView')}
                     </Button>
                   </div>
                 )}
@@ -284,7 +286,7 @@ export function DocumentPreviewPanel({
                   <div className="flex flex-col items-center justify-center h-64 border border-gray-200 dark:border-gray-700 rounded-md p-4 bg-gray-50 dark:bg-gray-800">
                     <FileText className="h-16 w-16 text-gray-300 dark:text-gray-600 mb-4" />
                     <p className="text-gray-600 dark:text-gray-400 text-center">
-                      No preview available for this document type.
+                      {t('store.noPreviewAvailable')}
                     </p>
                   </div>
                 )}
@@ -301,55 +303,55 @@ export function DocumentPreviewPanel({
                   <div className="flex flex-col items-center justify-center h-64 border border-gray-200 dark:border-gray-700 rounded-md p-4 bg-gray-50 dark:bg-gray-800">
                     <Info className="h-16 w-16 text-gray-300 dark:text-gray-600 mb-4" />
                     <p className="text-gray-600 dark:text-gray-400 text-center">
-                      No properties available for this document.
+                      {t('store.noPropertiesAvailable')}
                     </p>
                   </div>
                 )}
 
                 <div className="mt-4">
                   <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
-                    Document Information
+                    {t('store.documentInformation')}
                   </h3>
                   <div className="shadow rounded-md p-4 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
                     <div className="grid grid-cols-2 gap-y-2 gap-x-4 text-sm">
-                      <div className="text-gray-500 dark:text-gray-400">ID</div>
+                      <div className="text-gray-500 dark:text-gray-400">{t('store.id')}</div>
                       <div className="font-medium dark:text-gray-200">
                         {object.id}
                       </div>
 
                       <div className="text-gray-500 dark:text-gray-400">
-                        Type
+                        {t('store.contentType')}
                       </div>
                       <div className="font-medium dark:text-gray-200">
-                        {object.type?.name || "Unknown"}
+                        {object.type?.name || t('store.unknown')}
                       </div>
 
                       <div className="text-gray-500 dark:text-gray-400">
-                        Content Type
+                        {t('store.contentType')}
                       </div>
                       <div className="font-medium dark:text-gray-200">
-                        {object.content?.type || "N/A"}
+                        {object.content?.type || t('store.na')}
                       </div>
 
-                      <div className="text-gray-500">Size</div>
+                      <div className="text-gray-500">{t('store.size')}</div>
                       <div className="font-medium">
                         {object.content && "size" in object.content
                           ? formatFileSize(object.content.size as number)
-                          : "Unknown"}
+                          : t('store.unknown')}
                       </div>
 
-                      <div className="text-gray-500">Created</div>
+                      <div className="text-gray-500">{t('store.created')}</div>
                       <div className="font-medium">
                         {object.created_at
                           ? new Date(object.created_at).toLocaleString()
-                          : "N/A"}
+                          : t('store.na')}
                       </div>
 
-                      <div className="text-gray-500">Updated</div>
+                      <div className="text-gray-500">{t('store.updated')}</div>
                       <div className="font-medium">
                         {object.updated_at
                           ? new Date(object.updated_at).toLocaleString()
-                          : "N/A"}
+                          : t('store.na')}
                       </div>
                     </div>
                   </div>
@@ -375,8 +377,8 @@ export function DocumentPreviewPanel({
                     .catch((error) => {
                       console.error("Error getting download URL:", error);
                       toast({
-                        title: "Error",
-                        description: "Failed to download file",
+                        title: t('agent.error'),
+                        description: t('store.failedToDownloadFile'),
                         status: "error",
                         duration: 3000,
                       });
@@ -387,7 +389,7 @@ export function DocumentPreviewPanel({
               className="text-indigo-600 border-indigo-300 hover:bg-indigo-50"
             >
               <Download className="h-4 w-4 mr-2" />
-              Download
+              {t('pdf.download')}
             </Button>
           )}
         </div>
@@ -395,7 +397,7 @@ export function DocumentPreviewPanel({
           onClick={handleViewFullDocument}
           className="bg-indigo-600 hover:bg-indigo-700 text-white"
         >
-          Open Full Document
+          {t('store.openFullDocument')}
           <ChevronRight className="h-4 w-4 ml-2" />
         </Button>
       </div>

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

@@ -1,4 +1,5 @@
 import { ColumnLayout, ComplexSearchQuery, ContentObject, ContentObjectItem } from '@vertesia/common';
+import { useUITranslation } from '../../../i18n/index.js';
 import {
     Filter as BaseFilter,
     Button, Divider, ErrorBox,
@@ -50,6 +51,7 @@ interface DocumentSearchResultsWithDropZoneProps {
 export function DocumentSearchResultsWithDropZone({ onUploadDone = async () => { }, layout }: DocumentSearchResultsWithDropZoneProps) {
     const search = useDocumentSearch();
     const toast = useToast();
+    const { t } = useUITranslation();
 
     // Create a wrapper around the onUploadDone callback that also refreshes the search
     const handleUploadDone = async (objectIds: string[]) => {
@@ -62,8 +64,8 @@ export function DocumentSearchResultsWithDropZone({ onUploadDone = async () => {
             search.search().then(() => {
                 // Notify the user that the list has been refreshed
                 toast({
-                    title: "Document list refreshed",
-                    description: "The document list has been updated with your uploaded files.",
+                    title: t('store.documentListRefreshed'),
+                    description: t('store.documentListRefreshedDesc'),
                     status: "info",
                     duration: 3000,
                 });
@@ -94,6 +96,7 @@ interface DocumentSearchResultsProps {
 }
 export function DocumentSearchResults({ layout, onUpload, allowFilter = true, allowSearch = true }: DocumentSearchResultsProps) {
     // Get the search context to access collectionId
+    const { t } = useUITranslation();
     const searchContext = useDocumentSearch();
     const [isReady, setIsReady] = useState(false);
     const [selectedObject, setSelectedObject] = useState<ContentObjectItem | null>(null);
@@ -103,6 +106,12 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
         typeRegistry ? layout || getTableLayout(typeRegistry, search.query.type) : defaultLayout,
     );
 
+    useEffect(() => {
+        if (layout) {
+            setActualLayout(layout);
+        }
+    }, [layout]);
+
     //TODO _setRefreshTrigger state not used
     const [refreshTrigger, _setRefreshTrigger] = useState(0);
     const [loaded, setLoaded] = useState(0);
@@ -242,7 +251,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
         <div className="flex flex-col gap-y-2">
             <OverviewDrawer object={selectedObject} onClose={() => setSelectedObject(null)} />
             {
-                error && <ErrorBox title="Error">{error.message}</ErrorBox>
+                error && <ErrorBox title={t('store.error')}>{error.message}</ErrorBox>
             }
             <Toolsbar
                 isLoading={isLoading}
@@ -293,6 +302,7 @@ interface ToolsbarProps {
     setIsGridView: React.Dispatch<React.SetStateAction<boolean>>;
 }
 function Toolsbar(props: ToolsbarProps) {
+    const { t } = useUITranslation();
     const {
         isLoading,
         refreshTrigger,
@@ -309,29 +319,28 @@ function Toolsbar(props: ToolsbarProps) {
     return (
         <div className="sticky top-0 z-10 bg-background py-2 flex justify-between items-center">
             {
-                allowFilter && (
+                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={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} className="w-full" />
-                                }
-                                <FilterBtn />
+                        <div>
+                            <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={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} className="w-full" />
+                                    }
+                                    <FilterBtn />
+                                </div>
+                            </div>
+                            <div className="flex gap-2 items-center pt-2">
+                                <FilterBar />
+                                <FilterClear />
                             </div>
-                        </div>
-                        <div className="flex gap-2 items-center pt-2">
-                            <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">
                             {
@@ -342,7 +351,7 @@ function Toolsbar(props: ToolsbarProps) {
                 )
             }
             <div className="flex gap-1 items-center">
-                <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
+                <Button variant="outline" onClick={handleRefetch} alt={t('store.refresh')}><RefreshCw size={16} /></Button>
                 <ContentDispositionButton onUpdate={setIsGridView} />
             </div>
         </div>
@@ -359,14 +368,15 @@ function OverviewDrawer({ object, onClose }: OverviewDrawerProps) {
     const navigate = useNavigate();
     const { downloadFromContentSource } = useDownloadFile({ client: store, toast });
 
+    const contentSource = object?.content?.source;
     return object ? (
         <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}`)}>
                     <ExternalLink className="size-4" />
                 </Button>
-                {object.content?.source && (
-                    <Button variant="ghost" size="sm" title="Download" onClick={() => downloadFromContentSource(object.content!.source!, object.name || object.content?.name)}>
+                {contentSource && (
+                    <Button variant="ghost" size="sm" title="Download" onClick={() => downloadFromContentSource(contentSource, object.name || object.content?.name)}>
                         <Download className="size-4" />
                     </Button>
                 )}

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

@@ -1,5 +1,6 @@
 import { ContentObjectItem } from "@vertesia/common";
 import { Spinner, useToast } from "@vertesia/ui/core";
+import { useUITranslation } from '../../../i18n/index.js';
 import { DropZone } from '@vertesia/ui/widgets';
 import clsx from "clsx";
 import { ChangeEvent, useMemo, useState } from "react";
@@ -60,6 +61,7 @@ function ObjectTableWithDropZone({
     const [typeSelectionOpen, setTypeSelectionOpen] = useState(false);
     const search = useDocumentSearch();
     const toast = useToast();
+    const { t } = useUITranslation();
     const { checkDocumentProcessing } = useSmartFileUploadProcessing();
 
     // Handle file uploads when a file is dropped
@@ -80,7 +82,7 @@ function ObjectTableWithDropZone({
                 const toSkip = processed.filter((f) => f.action === "skip").length;
 
                 toast({
-                    title: "Files ready to process",
+                    title: t('store.filesReadyToProcess'),
                     description: `${droppedFiles.length} file(s): ${toCreate} new, ${toUpdate} to update, ${toSkip} to skip`,
                     status: "info",
                     duration: 4000,
@@ -92,8 +94,8 @@ function ObjectTableWithDropZone({
         } catch (error) {
             console.error("Error processing files:", error);
             toast({
-                title: "Error processing files",
-                description: "There was an error checking for duplicate files",
+                title: t('store.errorProcessingFiles'),
+                description: t('store.errorCheckingDuplicates'),
                 status: "error",
                 duration: 4000,
             });
@@ -251,7 +253,7 @@ function ObjectTableWithDropZone({
                         // If there are failures, show them
                         if (result.failedFiles && result.failedFiles.length > 0) {
                             toast({
-                                title: "Upload Issues",
+                                title: t('store.uploadIssues'),
                                 description: `${result.failedFiles.length} file(s) failed to upload`,
                                 status: "warning",
                                 duration: 5000,
@@ -266,7 +268,7 @@ function ObjectTableWithDropZone({
 
                             if (created > 0 || updated > 0) {
                                 toast({
-                                    title: "Upload Complete",
+                                    title: t('store.uploadComplete'),
                                     description: `${created > 0 ? `${created} created` : ""}${created > 0 && updated > 0 ? ", " : ""}${updated > 0 ? `${updated} updated` : ""}${skipped > 0 ? `, ${skipped} skipped` : ""}`,
                                     status: "success",
                                     duration: 5000,
@@ -315,6 +317,7 @@ function DocumentTableImpl({
     isLoading,
     onRowClick,
     onSelectionChange,
+    highlightRow,
     previewObject,
     selectedObject,
     isGridView,
@@ -369,6 +372,7 @@ function DocumentTableImpl({
     const columns = useMemo(() => {
         // avoid rendering empty layouts
         const actualLayout = layout.length > 0 ? layout : defaultLayout;
+        console.log("Using layout with columns:", actualLayout.map((col) => col.name).join(", "));
         return actualLayout.map((col) => new DocumentTableColumn(col, previewObject));
     }, [layout, previewObject]);
 
@@ -378,6 +382,7 @@ function DocumentTableImpl({
             isLoading={isLoading}
             columns={columns}
             onRowClick={onRowClick}
+            highlightRow={highlightRow}
             previewObject={previewObject}
             selectedObject={selectedObject}
             selection={selection}
@@ -390,6 +395,7 @@ function DocumentTableImpl({
             isLoading={isLoading}
             columns={columns}
             onRowClick={onRowClick}
+            highlightRow={highlightRow}
             previewObject={previewObject}
             selectedObject={selectedObject}
             selection={selection}