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

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

@@ -1,5 +1,6 @@
 import { useUserSession } from '@vertesia/ui/session';
 import { useState, useRef, useEffect } from 'react';
+import { useUITranslation } from '../../../../i18n/index.js';
 import {
     Button,
     Modal,
@@ -28,6 +29,7 @@ export interface PropertiesEditorModalProps {
 export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: PropertiesEditorModalProps) {
     const { client, store } = useUserSession();
     const toast = useToast();
+    const { t } = useUITranslation();
     const { theme } = useTheme();
     const navigate = useNavigate();
     const [isLoading, setIsLoading] = useState(false);
@@ -92,8 +94,8 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
         } catch (err) {
             toast({
                 status: 'error',
-                title: 'Invalid JSON',
-                description: 'Please fix the JSON syntax errors before saving.',
+                title: t('store.invalidJson'),
+                description: t('store.pleaseFixJsonSyntax'),
                 duration: 5000
             });
         }
@@ -127,8 +129,8 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
 
                 toast({
                     status: 'success',
-                    title: 'New version created',
-                    description: 'A new version with updated properties has been created.',
+                    title: t('store.newVersionCreated'),
+                    description: t('store.newVersionCreatedDesc'),
                     duration: 2000
                 });
 
@@ -143,8 +145,8 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
                         navigate(`/objects/${response.id}`);
                         toast({
                             status: 'info',
-                            title: 'Viewing New Version',
-                            description: versionLabel ? `Now viewing version '${versionLabel}'` : 'Now viewing the new version',
+                            title: t('store.viewingNewVersion'),
+                            description: versionLabel ? t('store.viewingVersionLabel', { label: versionLabel }) : t('store.viewingNewVersionDefault'),
                             duration: 3000
                         });
                     }, 100);
@@ -157,8 +159,8 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
 
                 toast({
                     status: 'success',
-                    title: 'Properties updated',
-                    description: 'The object properties have been updated successfully.',
+                    title: t('store.propertiesUpdated'),
+                    description: t('store.propertiesUpdatedDesc'),
                     duration: 2000
                 });
 
@@ -172,8 +174,8 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
         } catch (error: any) {
             toast({
                 status: 'error',
-                title: 'Error updating properties',
-                description: error.message || 'An error occurred while updating the properties.',
+                title: t('store.errorUpdatingProperties'),
+                description: error.message || t('store.errorUpdatingPropertiesDefault'),
                 duration: 5000
             });
             setIsLoading(false);
@@ -193,13 +195,13 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
                 onClose={onClose}
                 className="sm:max-w-[90%] md:max-w-[80%] lg:max-w-[75%] xl:max-w-[70%]"
             >
-                <ModalTitle>Edit Properties</ModalTitle>
+                <ModalTitle>{t('store.editProperties')}</ModalTitle>
                 <ModalBody>
                     <div className="mb-2 text-sm text-gray-500">
                         {object.type?.name ? (
                             <span>Editing properties for object type: <strong>{object.type.name}</strong></span>
                         ) : (
-                            <span>Editing properties for generic document</span>
+                            <span>{t('store.editingGenericDocument')}</span>
                         )}
                         {jsonSchema && (
                             <span className="ml-2 text-green-600">(JSON schema validation enabled)</span>

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

@@ -7,9 +7,10 @@ import {
     ModalTitle,
     Input,
     RadioGroup,
-    RadioOptionAdapter,
+    RadioGroupAdapter,
     FormItem
 } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
 
 export interface SaveVersionConfirmModalProps {
     isOpen: boolean;
@@ -26,42 +27,29 @@ interface SaveOptionType {
     description: string;
 }
 
-class SaveOptionAdapter extends RadioOptionAdapter<SaveOptionType> {
-    labelOf(item: SaveOptionType): string {
-        return item.label;
-    }
-
-    idOf(item: SaveOptionType): string {
-        return item.id;
-    }
-
-    renderOption(item: SaveOptionType): React.ReactNode {
-        return (
-            <div>
-                <div className="font-medium">{item.label}</div>
-                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-                    {item.description}
-                </p>
-            </div>
-        );
-    }
+class SaveOptionAdapter extends RadioGroupAdapter<SaveOptionType> {
+    idOf(item: SaveOptionType): string { return item.id }
+    labelOf(item: SaveOptionType): string { return item.label }
+    descriptionOf(item: SaveOptionType): React.ReactNode { return item.description }
+    selectedClassName(_item: SaveOptionType): string { return 'border-3 border-primary' }
 }
 
 export function SaveVersionConfirmModal({ isOpen, onClose, onConfirm, isLoading, uploadedFileName }: SaveVersionConfirmModalProps) {
+    const { t } = useUITranslation();
     const saveOptions: SaveOptionType[] = [
         {
             id: "update",
-            label: "Update current version",
+            label: t('modal.saveVersion.updateCurrent'),
             description: uploadedFileName
-                ? "Replace the content file and modify properties directly in the current revision."
-                : "Modify the properties directly in the current revision."
+                ? t('modal.saveVersion.updateWithFileDescription')
+                : t('modal.saveVersion.updateDescription')
         },
         {
             id: "new-version",
-            label: "Create new version",
+            label: t('modal.saveVersion.createNew'),
             description: uploadedFileName
-                ? "Create a new revision with the replacement file while preserving the original."
-                : "Create a new revision with these property changes while preserving the original."
+                ? t('modal.saveVersion.createWithFileDescription')
+                : t('modal.saveVersion.createDescription')
         }
     ];
 
@@ -91,38 +79,37 @@ export function SaveVersionConfirmModal({ isOpen, onClose, onConfirm, isLoading,
 
     return (
         <Modal isOpen={isOpen} onClose={onClose} className="sm:max-w-md">
-            <ModalTitle>Save Changes</ModalTitle>
+            <ModalTitle>{t('modal.saveChanges')}</ModalTitle>
             <ModalBody>
                 <div className="space-y-4">
                     {uploadedFileName && (
                         <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-md">
                             <p className="text-sm text-blue-700 dark:text-blue-300 font-medium">
-                                You&apos;re about to replace the content file with: <span className="font-bold">{uploadedFileName}</span>
+                                {t('modal.saveVersion.replaceFile')} <span className="font-bold">{uploadedFileName}</span>
                             </p>
                         </div>
                     )}
                     <p className="text-sm text-mixer-muted/5">
-                        How would you like to save these changes?
+                        {t('modal.saveVersion.howToSave')}
                     </p>
 
                     <RadioGroup
                         adapter={optionAdapter}
                         options={saveOptions}
-                        value={selectedOption}
-                        onChange={handleOptionChange}
-                        gap="gap-4"
+                        selected={selectedOption}
+                        onSelect={handleOptionChange}
                     />
 
                     {createVersion && (
                         <FormItem
-                            label="Version Label (Optional)"
-                            description="Optional label for the new version."
+                            label={t('modal.saveVersion.versionLabel')}
+                            description={t('modal.saveVersion.versionLabelDescription')}
                             className="mt-3 pl-8"
                         >
                             <Input
                                 value={versionLabel}
                                 onChange={setVersionLabel}
-                                placeholder="e.g., v1.2, approved, post-review"
+                                placeholder={t('modal.saveVersion.versionLabelPlaceholder')}
                                 className="w-full"
                             />
                         </FormItem>
@@ -131,14 +118,14 @@ export function SaveVersionConfirmModal({ isOpen, onClose, onConfirm, isLoading,
             </ModalBody>
             <ModalFooter>
                 <Button variant="secondary" onClick={onClose} disabled={isLoading}>
-                    Cancel
+                    {t('modal.cancel')}
                 </Button>
                 <Button
                     variant="primary"
                     onClick={handleConfirm}
                     isLoading={isLoading}
                 >
-                    Save
+                    {t('modal.save')}
                 </Button>
             </ModalFooter>
         </Modal>

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { clsx } from "clsx";
 import { RefreshCw } from "lucide-react";
@@ -11,6 +11,7 @@ import { ContentDispositionButton } from "./ContentDispositionButton";
 
 import { ColumnLayout, ContentObjectItem } from "@vertesia/common";
 import { Button, ErrorBox, Spinner, useIntersectionObserver } from "@vertesia/ui/core";
+import { useUITranslation } from '../../../../i18n/index.js';
 
 const layout: ColumnLayout[] = [
     { "name": "Name", "field": "properties.title", "type": "string", "fallback": "name" },
@@ -25,23 +26,31 @@ interface SelectDocumentProps {
     onChange: (value: ContentObjectItem) => void;
     type?: string;
     mimeType?: string;
+    /** IDs of already-selected documents — used to highlight rows */
+    selectedIds?: Set<string>;
 }
-export function SelectDocument({ onChange }: Readonly<SelectDocumentProps>) {
+export function SelectDocument({ onChange, selectedIds }: Readonly<SelectDocumentProps>) {
     const onRowClick = (selected: ContentObjectItem) => {
         onChange(selected || undefined);
     }
 
     return (
         <DocumentSearchProvider>
-            <SelectDocumentImpl onRowClick={onRowClick} />
+            <SelectDocumentImpl onRowClick={onRowClick} selectedIds={selectedIds} />
         </DocumentSearchProvider>
     )
 }
 
 interface SelectDocumentImplProps {
     onRowClick: (selected: ContentObjectItem) => void;
+    selectedIds?: Set<string>;
 }
-function SelectDocumentImpl({ onRowClick }: Readonly<SelectDocumentImplProps>) {
+function SelectDocumentImpl({ onRowClick, selectedIds }: Readonly<SelectDocumentImplProps>) {
+    const { t } = useUITranslation();
+    const highlightRow = useCallback(
+        (item: ContentObjectItem) => !!selectedIds?.has(item.id),
+        [selectedIds],
+    );
     const [isReady, setIsReady] = useState(false);
     const [isGridView, setIsGridView] = useState(localStorage.getItem(LAST_DISPLAYED_VIEW) === "grid");
     const { search, isLoading, error, objects, hasMore } = useWatchDocumentSearchResult();
@@ -73,7 +82,7 @@ function SelectDocumentImpl({ onRowClick }: Readonly<SelectDocumentImplProps>) {
     }
 
     if (error) {
-        return <ErrorBox title="Search failed">{error.message}</ErrorBox>
+        return <ErrorBox title={t('store.searchFailed')}>{error.message}</ErrorBox>
     }
 
     return (
@@ -89,7 +98,7 @@ function SelectDocumentImpl({ onRowClick }: Readonly<SelectDocumentImplProps>) {
             </div>
             <div className="@container flex-1 overflow-y-auto">
                 {/* Documents Display Grid or Table */}
-                <DocumentTable objects={objects || []} isLoading={false} layout={layout} onRowClick={onRowClick} isGridView={isGridView} />
+                <DocumentTable objects={objects || []} isLoading={false} layout={layout} onRowClick={onRowClick} highlightRow={selectedIds?.size ? highlightRow : undefined} isGridView={isGridView} />
 
                 {/* Intersection observer target */}
                 <div ref={loadMoreRef} className="h-4 w-full" />

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

@@ -0,0 +1,143 @@
+import { useState, useRef, useCallback } from 'react';
+import { ContentObject } from '@vertesia/common';
+import { Button, useToast, useTheme } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+import { useNavigate } from '@vertesia/ui/router';
+import { MonacoEditor, IEditorApi } from '@vertesia/ui/widgets';
+import { useUITranslation } from '../../../../i18n/index.js';
+import { SaveVersionConfirmModal } from './SaveVersionConfirmModal.js';
+
+interface TextEditorPanelProps {
+    object: ContentObject;
+    text: string;
+    onClose: () => void;
+    onSaved: () => void;
+}
+
+function getMonacoLanguage(contentType?: string): string {
+    switch (contentType) {
+        case 'text/markdown':
+            return 'markdown';
+        case 'application/json':
+            return 'json';
+        case 'application/xml':
+        case 'text/xml':
+            return 'xml';
+        default:
+            return 'plaintext';
+    }
+}
+
+export function TextEditorPanel({ object, text, onClose, onSaved }: TextEditorPanelProps) {
+    const { store } = useUserSession();
+    const toast = useToast();
+    const { t } = useUITranslation();
+    const { theme } = useTheme();
+    const navigate = useNavigate();
+    const editorRef = useRef<IEditorApi | undefined>(undefined);
+    const [isDirty, setIsDirty] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [showConfirmation, setShowConfirmation] = useState(false);
+
+    const language = getMonacoLanguage(object.content?.type);
+
+    const handleEditorChange = useCallback(() => {
+        if (!isDirty) setIsDirty(true);
+    }, [isDirty]);
+
+    function handleSave() {
+        if (!editorRef.current) return;
+        setShowConfirmation(true);
+    }
+
+    async function saveText(createVersion: boolean, versionLabel?: string) {
+        if (!editorRef.current) return;
+
+        const editorText = editorRef.current.getValue();
+        const contentType = object.content?.type || 'text/plain';
+        const fileName = object.content?.name || 'content.txt';
+
+        try {
+            setIsSaving(true);
+
+            const blob = new Blob([editorText], { type: contentType });
+            const file = new File([blob], fileName, { type: contentType });
+
+            const response = await store.objects.update(object.id, {
+                content: file as any,
+            }, {
+                createRevision: createVersion,
+                revisionLabel: versionLabel,
+                ifMatch: object.content?.etag,
+            });
+
+            toast({
+                status: 'success',
+                title: t('store.textSaved'),
+                duration: 2000,
+            });
+
+            setShowConfirmation(false);
+
+            if (createVersion && response.id !== object.id) {
+                onClose();
+                setTimeout(() => {
+                    navigate(`/objects/${response.id}`);
+                }, 100);
+            } else {
+                onSaved();
+            }
+        } catch (error: any) {
+            const is412 = error?.status === 412 || error?.message?.includes('412');
+            toast({
+                status: 'error',
+                title: t('store.errorSavingText'),
+                description: is412
+                    ? t('store.textConflict')
+                    : (error.message || t('store.errorSavingTextDefault')),
+                duration: 5000,
+            });
+        } finally {
+            setIsSaving(false);
+        }
+    }
+
+    return (
+        <>
+            <div className="flex items-center gap-2 px-2 py-1 shrink-0">
+                {isDirty && (
+                    <span className="text-xs text-attention">{t('store.unsavedChanges')}</span>
+                )}
+                <div className="flex-1" />
+                <Button variant="ghost" size="sm" onClick={onClose} disabled={isSaving}>
+                    {t('store.cancelEdit')}
+                </Button>
+                <Button variant="outline" size="sm" onClick={handleSave} disabled={!isDirty} isLoading={isSaving}>
+                    {t('store.saveText')}
+                </Button>
+            </div>
+            <div className="flex-1 min-h-0 border rounded-md overflow-hidden mx-2 mb-2">
+                <MonacoEditor
+                    value={text}
+                    language={language}
+                    editorRef={editorRef}
+                    onChange={handleEditorChange}
+                    theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                    options={{
+                        wordWrap: 'on',
+                        minimap: { enabled: false },
+                        lineNumbers: 'on',
+                        scrollBeyondLastLine: false,
+                    }}
+                />
+            </div>
+
+            <SaveVersionConfirmModal
+                isOpen={showConfirmation}
+                onClose={() => setShowConfirmation(false)}
+                onConfirm={saveText}
+                isLoading={isSaving}
+            />
+        </>
+    );
+}

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

@@ -5,6 +5,8 @@ import { Button, Checkbox, Input, Modal, ModalBody, ModalFooter, ModalTitle, Num
 import { useUserSession } from '@vertesia/ui/session';
 import { Settings } from 'lucide-react';
 
+import { useUITranslation } from '../../../../i18n/index.js';
+
 interface VectorSearchWidgetProps {
     onChange: (query?: ComplexSearchQuery) => void;
     className?: string;
@@ -19,6 +21,7 @@ const embeddingTypes = Object.values(SupportedEmbeddingTypes);
 
 export function VectorSearchWidget({ onChange, isLoading, refresh, searchTypes }: VectorSearchWidgetProps) {
     const { client, project } = useUserSession();
+    const { t } = useUITranslation();
     const toast = useToast();
 
     const [searchText, setSearchText] = useState<string | undefined>(undefined);
@@ -104,10 +107,10 @@ export function VectorSearchWidget({ onChange, isLoading, refresh, searchTypes }
 
     return (
         <div className="flex gap-1 items-center">
-            <Input placeholder="Type what you are looking for, or select a filter" value={searchText} onChange={setSearchText} onKeyDown={handleKeyPress} className='min-w-[200px]' />
-            <Button variant="ghost" onClick={() => setShowSettings(true)} alt="Semantic search settings" className="ml-1"><Settings size={18} /></Button>
+            <Input placeholder={t('store.searchPlaceholder')} value={searchText} onChange={setSearchText} onKeyDown={handleKeyPress} className='min-w-[200px]' />
+            <Button variant="ghost" onClick={() => setShowSettings(true)} alt={t('store.semanticSearchSettings')} className="ml-1"><Settings size={18} /></Button>
             <Modal isOpen={showSettings} onClose={() => setShowSettings(false)}>
-                <ModalTitle>Search Types</ModalTitle>
+                <ModalTitle>{t('store.searchTypes')}</ModalTitle>
                 <ModalBody>
                     <div className="flex flex-col gap-2">
                         <label className="flex items-center gap-2">
@@ -115,9 +118,9 @@ export function VectorSearchWidget({ onChange, isLoading, refresh, searchTypes }
                                 checked={selectedTypes.includes(SearchTypes.full_text)}
                                 onCheckedChange={handleCheckboxChange(SearchTypes.full_text)}
                             />
-                            <span>Full Text</span>
+                            <span>{t('store.fullText')}</span>
                         </label>
-                        <div className="font-semibold mt-2 mb-1">Embeddings</div>
+                        <div className="font-semibold mt-2 mb-1">{t('store.embeddings')}</div>
                         {embeddingTypes.map(type => (
                             <label key={type} className="flex items-center gap-2">
                                 <Checkbox
@@ -128,16 +131,16 @@ export function VectorSearchWidget({ onChange, isLoading, refresh, searchTypes }
                             </label>
                         ))}
                         <div className="mt-3">
-                            <span className="mr-2">Limit</span>
+                            <span className="mr-2">{t('store.limit')}</span>
                             <NumberInput type="number" min={1} value={limit} onChange={v => setLimit(Number(v ?? 100))} style={{ width: 80 }} />
                         </div>
                     </div>
                 </ModalBody>
                 <ModalFooter>
-                    <Button variant="outline" onClick={() => setShowSettings(false)}>Close</Button>
+                    <Button variant="outline" onClick={() => setShowSettings(false)}>{t('store.close')}</Button>
                 </ModalFooter>
             </Modal>
-            <Button variant="secondary" isLoading={isLoading} onClick={fireSearch} isDisabled={!isReady} alt="Semantic search">Search</Button>
+            <Button variant="secondary" isLoading={isLoading} onClick={fireSearch} isDisabled={!isReady} alt={t('store.semanticSearch')}>{t('store.search')}</Button>
         </div>
     );
 }

package/src/features/store/objects/components/useContentPanelHooks.ts

@@ -1,6 +1,7 @@
 import { DocAnalyzerProgress, DocProcessorOutputFormat, MarkdownRenditionFormat, WorkflowExecutionStatus } from "@vertesia/common";
 import { useUserSession } from "@vertesia/ui/session";
 import { useCallback, useEffect, useState } from "react";
+import { i18nInstance, NAMESPACE } from '../../../../i18n/instance.js';
 
 // Maximum text size before cropping (128K characters)
 const MAX_TEXT_DISPLAY_SIZE = 128 * 1024;
@@ -136,6 +137,7 @@ export function usePdfProcessingStatus(objectId: string, shouldPoll: boolean) {
  */
 export function useOfficePdfConversion(objectId: string, enabled: boolean) {
     const { client } = useUserSession();
+    const t = i18nInstance.getFixedT(null, NAMESPACE);
 
     const [pdfUrl, setPdfUrl] = useState<string | undefined>();
     const [isConverting, setIsConverting] = useState(false);
@@ -163,12 +165,12 @@ export function useOfficePdfConversion(objectId: string, enabled: boolean) {
                     setPdfUrl(response.renditions[0]);
                     setIsConverting(false);
                 } else if (response.status === "failed") {
-                    setError("PDF conversion failed");
+                    setError(t('store.pdfConversionFailed'));
                     setIsConverting(false);
                 }
             } catch (err) {
                 console.error("Failed to convert Office document to PDF:", err);
-                setError("Failed to convert to PDF");
+                setError(t('store.failedToConvertToPdf'));
                 setIsConverting(false);
             }
         };

package/src/features/store/objects/components/useDownloadFile.ts

@@ -2,6 +2,7 @@ import { VertesiaClient, ZenoClient } from "@vertesia/client";
 import { MarkdownRenditionFormat, RenderMarkdownPayload } from "@vertesia/common";
 import { useCallback, useState } from "react";
 import { ToastFn } from "@vertesia/ui/core";
+import { i18nInstance, NAMESPACE } from '../../../../i18n/instance.js';
 
 export interface UseDownloadFileOptions {
     client: VertesiaClient | ZenoClient;
@@ -37,6 +38,7 @@ export interface UseDownloadFileResult {
  * Handles GCS URIs (via client.files API), direct URLs, and markdown rendering.
  */
 export function useDownloadFile({ client, toast }: UseDownloadFileOptions): UseDownloadFileResult {
+    const t = i18nInstance.getFixedT(null, NAMESPACE);
     const [isDownloading, setIsDownloading] = useState(false);
 
     /**
@@ -57,8 +59,8 @@ export function useDownloadFile({ client, toast }: UseDownloadFileOptions): UseD
         } catch (err) {
             toast({
                 status: "error",
-                title: "Download failed",
-                description: err instanceof Error ? err.message : "Failed to get download URL",
+                title: t('store.downloadFailed'),
+                description: err instanceof Error ? err.message : t('store.failedToGetDownloadUrl'),
                 duration: 5000,
             });
         } finally {
@@ -120,15 +122,15 @@ export function useDownloadFile({ client, toast }: UseDownloadFileOptions): UseD
 
             toast({
                 status: "success",
-                title: "Document exported",
-                description: `Successfully exported to ${options.format.toUpperCase()}`,
+                title: t('store.documentExported'),
+                description: t('store.successfullyExportedTo', { format: options.format.toUpperCase() }),
                 duration: 2000,
             });
         } catch (err) {
             toast({
                 status: "error",
-                title: "Export failed",
-                description: err instanceof Error ? err.message : "Failed to export document",
+                title: t('store.exportFailed'),
+                description: err instanceof Error ? err.message : t('store.failedToExportDocument'),
                 duration: 5000,
             });
         } finally {
@@ -157,15 +159,15 @@ export function useDownloadFile({ client, toast }: UseDownloadFileOptions): UseD
 
             toast({
                 status: "success",
-                title: "Content exported",
-                description: `Successfully exported to ${options.format.toUpperCase()}`,
+                title: t('store.contentExported'),
+                description: t('store.successfullyExportedTo', { format: options.format.toUpperCase() }),
                 duration: 2000,
             });
         } catch (err) {
             toast({
                 status: "error",
-                title: "Export failed",
-                description: err instanceof Error ? err.message : "Failed to export content",
+                title: t('store.exportFailed'),
+                description: err instanceof Error ? err.message : t('store.failedToExportContent'),
                 duration: 5000,
             });
         } finally {

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

@@ -1,5 +1,7 @@
 import { ColumnLayout, ContentObjectItem } from "@vertesia/common";
 import { Table, TBody } from "@vertesia/ui/core";
+import { useUITranslation } from '../../../../i18n/index.js';
+import { CheckIcon } from "lucide-react";
 import { ChangeEvent } from "react";
 import { DocumentIcon, DocumentIconSkeleton } from "../components/DocumentIcon";
 import { DocumentSelection } from "../DocumentSelectionProvider";
@@ -10,6 +12,7 @@ interface ViewProps {
     isLoading: boolean;
     layout?: ColumnLayout[];
     onRowClick?: (object: ContentObjectItem) => void;
+    highlightRow?: (item: ContentObjectItem) => boolean;
     previewObject?: (objectId: string) => void;
     selectedObject?: ContentObjectItem | null;
     onSelectionChange: ((object: ContentObjectItem, ev: ChangeEvent<HTMLInputElement>) => void);
@@ -18,7 +21,8 @@ interface ViewProps {
     columns: DocumentTableColumn[];
 }
 
-export function DocumentTableView({ objects, selection, isLoading, columns, onRowClick, selectedObject, toggleAll, onSelectionChange }: ViewProps) {
+export function DocumentTableView({ objects, selection, isLoading, columns, onRowClick, highlightRow, selectedObject, toggleAll, onSelectionChange }: ViewProps) {
+    const { t } = useUITranslation();
     return (
         <Table className="w-full border-t">
             <thead>
@@ -32,8 +36,9 @@ export function DocumentTableView({ objects, selection, isLoading, columns, onRo
             <TBody isLoading={isLoading} columns={columns.length + 1}>
                 {
                     objects?.map((obj: ContentObjectItem) => {
+                        const isHighlighted = highlightRow?.(obj);
                         return (
-                            <tr key={obj.id} className={`cursor-pointer hover:bg-muted group ${selectedObject?.id === obj.id ? 'bg-muted' : ''}`} onClick={() => {
+                            <tr key={obj.id} className={`cursor-pointer hover:bg-muted group ${selectedObject?.id === obj.id ? 'bg-muted' : ''} ${isHighlighted ? 'bg-blue-50 dark:bg-blue-900/20' : ''}`} onClick={() => {
                                 onRowClick && onRowClick(obj)
                             }}>
                                 {selection &&
@@ -43,27 +48,32 @@ export function DocumentTableView({ objects, selection, isLoading, columns, onRo
                                     </td>
                                 }
                                 {columns.map((col, index) => col.render(obj, index))}
+                                <td className="w-8 text-center">
+                                    {isHighlighted && (
+                                        <CheckIcon className="size-4 text-blue-600 dark:text-blue-400 inline-block" />
+                                    )}
+                                </td>
                             </tr>
                         )
                     })
                 }
-                {objects.length === 0 && <tr><td colSpan={columns.length + (selection ? 1 : 0)} className="text-center">No objects. Just drag and drop documents or images here to create content objects.</td></tr>}
+                {objects.length === 0 && <tr><td colSpan={columns.length + (selection ? 1 : 0)} className="text-center">{t('store.noObjectsDragAndDrop')}</td></tr>}
             </TBody>
         </Table>
     )
 }
 
-export function DocumentGridView({ objects, selection, isLoading, onSelectionChange, onRowClick, previewObject, selectedObject }: ViewProps) {
+export function DocumentGridView({ objects, selection, isLoading, onSelectionChange, onRowClick, highlightRow, previewObject, selectedObject }: ViewProps) {
     return (
         <>
             <DocumentIconSkeleton isLoading={isLoading} />
             <div className="w-full gap-2 grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 @xs:grid-cols-1 @sm:grid-cols-2 @md:grid-cols-3 @lg:grid-cols-4">
                 {
                     objects.map((document) => (
-                        <DocumentIcon key={document.id} document={document} selection={selection} onSelectionChange={onSelectionChange} onRowClick={onRowClick} previewObject={previewObject} selectedObject={selectedObject} />
+                        <DocumentIcon key={document.id} document={document} selection={selection} onSelectionChange={onSelectionChange} onRowClick={onRowClick} highlightRow={highlightRow} previewObject={previewObject} selectedObject={selectedObject} />
                     ))
                 }
             </div>
         </>
     )
-}
+}