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

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

@@ -1,5 +1,6 @@
 import { Button, Modal, ModalBody, ModalTitle, SelectBox, Spinner } from "@vertesia/ui/core";
 import { useState } from "react";
+import { useUITranslation } from '../../../i18n/index.js';
 
 export enum ExportTypes {
     CSV = "CSV", JSON = "JSON"
@@ -32,6 +33,7 @@ interface SelectPanelProps {
     onClose: (exportType?: string | null, exportAll?: boolean) => void;
 }
 function SelectPanel({ onClose }: SelectPanelProps) {
+    const { t } = useUITranslation();
     const [exportType, setExportType] = useState<string | undefined>(undefined);
     const [exportAll, setExportAll] = useState<string | undefined>(undefined);
 
@@ -52,7 +54,7 @@ function SelectPanel({ onClose }: SelectPanelProps) {
                     options={selectionOption}
                     value={exportAll}
                     onChange={setExportAll}
-                    placeholder="Choose what to export"
+                    placeholder={t('store.chooseWhatToExport')}
                     className="h-full w-full text-sm"
                     filterBy="name"
                     isClearable
@@ -63,13 +65,13 @@ function SelectPanel({ onClose }: SelectPanelProps) {
                     options={Object.values(ExportTypes)}
                     value={exportType}
                     onChange={setExportType}
-                    placeholder="Choose a format"
+                    placeholder={t('store.chooseAFormat')}
                     className="h-full w-full text-sm"
                     filterBy="name"
                     isClearable
                 />
 
-                <Button className="w-full" isDisabled={!exportType || !exportAll} onClick={onSubmit}>Export Properties</Button>
+                <Button className="w-full" isDisabled={!exportType || !exportAll} onClick={onSubmit}>{t('store.actions.exportProperties')}</Button>
             </div>
         </ModalBody>
     )
@@ -77,12 +79,13 @@ function SelectPanel({ onClose }: SelectPanelProps) {
 
 interface WaitingPanelProps { }
 function WaitingPanel({ }: WaitingPanelProps) {
+    const { t } = useUITranslation();
     return (
         <ModalBody className="min-h-[84px] pt-0">
             <div className='h-full grid flex-col gap-y-2 content-between justify-items-center'>
                 <div className="text-sm flex flex-col gap-x-2">
-                    <p>EXPORT IS IN PROGRESS</p>
-                    <p className="pt-2 grid justify-items-center">PLEASE WAIT</p>
+                    <p>{t('store.exportInProgress')}</p>
+                    <p className="pt-2 grid justify-items-center">{t('store.pleaseWait')}</p>
                 </div>
                 <Spinner size='lg' />
             </div>

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

@@ -2,6 +2,7 @@ import { LayoutGrid, TableProperties } from 'lucide-react'
 import { useState } from 'react'
 
 import { Button } from '@vertesia/ui/core'
+import { useUITranslation } from '@vertesia/ui/i18n'
 
 const LAST_DISPLAYED_VIEW = 'vertesia.content_store.lastDisplayedView'
 
@@ -9,6 +10,7 @@ interface ContentDispositionButtonProps {
     onUpdate: (value: boolean) => void
 }
 export function ContentDispositionButton({ onUpdate }: Readonly<ContentDispositionButtonProps>) {
+    const { t } = useUITranslation()
     const [isGridView, setIsGridView] = useState(localStorage.getItem(LAST_DISPLAYED_VIEW) === "grid")
 
     const updateView = () => {
@@ -32,7 +34,7 @@ export function ContentDispositionButton({ onUpdate }: Readonly<ContentDispositi
     }
 
     return (
-        <Button variant="outline" onClick={updateView} alt={isGridView ? "Table View" : "Thumbnail View"}>
+        <Button variant="outline" onClick={updateView} alt={isGridView ? t('misc.tableView') : t('misc.thumbnailView')}>
             {
                 isGridView
                     ? <TableProperties />

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

@@ -1,15 +1,18 @@
 import { memo, useEffect, useRef, useState, type RefObject } from "react";
 
-import { AUDIO_RENDITION_NAME, AudioMetadata, ContentNature, ContentObject, ContentObjectStatus, DocAnalyzerProgress, DocProcessorOutputFormat, DocumentMetadata, ImageRenditionFormat, MarkdownRenditionFormat, PDF_RENDITION_NAME, POSTER_RENDITION_NAME, VideoMetadata, WorkflowExecutionStatus } from "@vertesia/common";
+import { AUDIO_RENDITION_NAME, AudioMetadata, ContentNature, ContentObject, ContentObjectStatus, DocAnalyzerProgress, DocProcessorOutputFormat, DocumentMetadata, ImageRenditionFormat, MarkdownRenditionFormat, PDF_RENDITION_NAME, Permission, POSTER_RENDITION_NAME, VideoMetadata, WorkflowExecutionStatus } from "@vertesia/common";
 import { Button, Portal, ResizableHandle, ResizablePanel, ResizablePanelGroup, Spinner, useToast } from "@vertesia/ui/core";
 import { NavLink } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
 import { JSONDisplay, MarkdownRenderer, Progress, XMLViewer } from "@vertesia/ui/widgets";
 import { AlertTriangle, Copy, Download, FileSearch, SquarePen } from "lucide-react";
+import { useUITranslation } from '../../../../i18n/index.js';
 import { MagicPdfView } from "../../../magic-pdf";
 import { SimplePdfViewer } from "../../../pdf-viewer";
+import { SecureButton } from "../../../permissions/SecureButton.js";
 import { getWorkflowStatusColor, getWorkflowStatusName, isPreviewableAsPdf } from "../../../utils/index.js";
 import { PropertiesEditorModal } from "./PropertiesEditorModal";
+import { TextEditorPanel } from "./TextEditorPanel.js";
 import { useObjectText, useOfficePdfConversion, usePdfProcessingStatus } from "./useContentPanelHooks.js";
 import { useDownloadFile } from "./useDownloadFile.js";
 
@@ -30,18 +33,6 @@ const WEB_SUPPORTED_AUDIO_FORMATS = [
     'audio/webm',   // WebM audio
 ];
 
-// Panel height constants for consistent layout
-const PANEL_HEIGHTS = {
-    /** Main resizable panel group */
-    main: "h-[calc(100vh-208px)]",
-    /** Properties panel content area */
-    properties: "h-[calc(100vh-228px)]",
-    /** Text/PDF content panel */
-    content: "h-[calc(100vh-218px)]",
-    /** Video max height */
-    video: "max-h-[calc(100vh-268px)]",
-} as const;
-
 // ----- Type Definitions -----
 
 interface TextActionsProps {
@@ -50,6 +41,9 @@ interface TextActionsProps {
     fullText: string | undefined;
     handleCopyContent: (content: string, type: "text" | "properties") => Promise<void>;
     textContainerRef: RefObject<HTMLDivElement | null>;
+    isEditing?: boolean;
+    onToggleEdit?: () => void;
+    canEdit?: boolean;
 }
 
 interface TextPanelProps {
@@ -163,7 +157,7 @@ function looksLikeMarkdown(text: string | undefined): boolean {
  * Returns empty string if visible, 'hidden' if not visible.
  */
 function getPanelVisibility(isVisible: boolean): string {
-    return isVisible ? '' : 'hidden';
+    return isVisible ? 'h-full overflow-auto' : 'hidden';
 }
 
 enum PanelView {
@@ -186,6 +180,7 @@ export function ContentOverview({
     refetch,
 }: ContentOverviewProps) {
     const toast = useToast();
+    const { t } = useUITranslation();
 
     const handleCopyContent = async (
         content: string,
@@ -195,16 +190,16 @@ export function ContentOverview({
             await navigator.clipboard.writeText(content);
             toast({
                 status: "success",
-                title: `${type === "text" ? "Content" : "Properties"} copied`,
-                description: `Successfully copied ${type} to clipboard`,
+                title: t('store.contentCopied', { type: type === "text" ? t('store.contentType') : t('store.properties') }),
+                description: t('store.successfullyCopied', { type }),
                 duration: 2000,
             });
         } catch (err) {
             console.error(`Failed to copy ${type}:`, err);
             toast({
                 status: "error",
-                title: "Copy failed",
-                description: `Failed to copy ${type} to clipboard`,
+                title: t('store.copyFailed'),
+                description: t('store.failedToCopy', { type }),
                 duration: 5000,
             });
         }
@@ -212,7 +207,7 @@ export function ContentOverview({
 
     return (
         <>
-            <ResizablePanelGroup direction="horizontal" className={PANEL_HEIGHTS.main}>
+            <ResizablePanelGroup direction="horizontal" className='h-full'>
                 <ResizablePanel className="min-w-[100px]">
                     <PropertiesPanel object={object} refetch={refetch ?? (() => Promise.resolve())} handleCopyContent={handleCopyContent} />
                 </ResizablePanel>
@@ -228,6 +223,7 @@ export function ContentOverview({
 }
 
 function PropertiesPanel({ object, refetch, handleCopyContent }: { object: ContentObject, refetch: () => Promise<unknown>, handleCopyContent: (content: string, type: "text" | "properties") => Promise<void> }) {
+    const { t } = useUITranslation();
     const [viewCode, setViewCode] = useState(false);
     const [isPropertiesModalOpen, setPropertiesModalOpen] = useState(false);
 
@@ -246,7 +242,7 @@ function PropertiesPanel({ object, refetch, handleCopyContent }: { object: Conte
                     <Button
                         variant={`${viewCode ? "ghost" : "primary"}`}
                         size="sm"
-                        alt="Preview properties"
+                        alt={t('store.previewProperties')}
                         onClick={() => setViewCode(!viewCode)}
                     >
                         Properties
@@ -254,7 +250,7 @@ function PropertiesPanel({ object, refetch, handleCopyContent }: { object: Conte
                     <Button
                         variant={`${viewCode ? "primary" : "ghost"}`}
                         size="sm"
-                        alt="View in JSON format"
+                        alt={t('store.viewInJsonFormat')}
                         onClick={() => setViewCode(!viewCode)}
                     >
                         JSON
@@ -294,7 +290,7 @@ function PropertiesPanel({ object, refetch, handleCopyContent }: { object: Conte
 
             {
                 object.properties ? (
-                    <div className={`${PANEL_HEIGHTS.properties} overflow-auto px-2`}>
+                    <div className={`h-full px-2`}>
                         <JSONDisplay
                             value={object.properties}
                             viewCode={viewCode}
@@ -302,8 +298,8 @@ function PropertiesPanel({ object, refetch, handleCopyContent }: { object: Conte
                         />
                     </div>
                 ) : (
-                    <div className={`${PANEL_HEIGHTS.properties} overflow-auto px-2`}>
-                        <div>No properties defined</div>
+                    <div className={`h-full px-2`}>
+                        <div>{t('store.noPropertiesDefined')}</div>
                     </div>
                 )
             }
@@ -319,6 +315,7 @@ function PropertiesPanel({ object, refetch, handleCopyContent }: { object: Conte
 }
 
 function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: ContentObject, loadText: boolean, handleCopyContent: (content: string, type: "text" | "properties") => Promise<void>, refetch?: () => Promise<unknown> }) {
+    const { t } = useUITranslation();
     const isImage = object?.metadata?.type === ContentNature.Image;
     const isVideo = object?.metadata?.type === ContentNature.Video;
     const isAudio = object?.metadata?.type === ContentNature.Audio;
@@ -341,12 +338,24 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
 
     const [currentPanel, setCurrentPanel] = useState<PanelView>(getInitialView());
 
+    // Text editing state
+    const [isEditing, setIsEditing] = useState(false);
+    const canEdit = !!(
+        object.content?.source &&
+        object.content?.type &&
+        !isCreatedOrProcessing &&
+        !object.is_locked &&
+        object.user_permissions?.can_write !== false &&
+        (object.content.type.startsWith('text/') || object.content.type === 'application/json' || object.content.type === 'application/xml')
+    );
+
     // Use custom hooks for text loading, PDF processing, and Office conversion
     const {
         fullText,
         displayText,
         isLoading: isLoadingText,
         isCropped: isTextCropped,
+        loadText: reloadText,
     } = useObjectText(object.id, object.text, loadText);
 
     // Poll for PDF/document processing status when object is created or processing
@@ -387,7 +396,7 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                             <Button
                                 variant={currentPanel === PanelView.Image ? "primary" : "ghost"}
                                 size="sm"
-                                alt="View Image"
+                                alt={t('store.viewImage')}
                                 onClick={() => setCurrentPanel(PanelView.Image)}
                             >
                                 Image
@@ -397,7 +406,7 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                             <Button
                                 variant={currentPanel === PanelView.Video ? "primary" : "ghost"}
                                 size="sm"
-                                alt="View Video"
+                                alt={t('store.viewVideo')}
                                 onClick={() => setCurrentPanel(PanelView.Video)}
                             >
                                 Video
@@ -407,7 +416,7 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                             <Button
                                 variant={currentPanel === PanelView.Audio ? "primary" : "ghost"}
                                 size="sm"
-                                alt="View Audio"
+                                alt={t('store.viewAudio')}
                                 onClick={() => setCurrentPanel(PanelView.Audio)}
                             >
                                 Audio
@@ -417,7 +426,7 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                             <Button
                                 variant={currentPanel === PanelView.Transcript ? "primary" : "ghost"}
                                 size="sm"
-                                alt="View Transcript"
+                                alt={t('store.viewTranscript')}
                                 onClick={() => setCurrentPanel(PanelView.Transcript)}
                             >
                                 Transcript
@@ -426,7 +435,7 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                         <Button
                             variant={currentPanel === PanelView.Text ? "primary" : "ghost"}
                             size="sm"
-                            alt="View Text"
+                            alt={t('store.viewText')}
                             onClick={() => setCurrentPanel(PanelView.Text)}
                         >
                             Text
@@ -435,7 +444,7 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                             <Button
                                 variant={currentPanel === PanelView.Pdf ? "primary" : "ghost"}
                                 size="sm"
-                                alt="View PDF"
+                                alt={t('store.viewPdf')}
                                 onClick={() => setCurrentPanel(PanelView.Pdf)}
                             >
                                 PDF
@@ -445,7 +454,7 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                             <Button
                                 variant={currentPanel === PanelView.Pdf ? "primary" : "ghost"}
                                 size="sm"
-                                alt="View as PDF"
+                                alt={t('store.viewAsPdf')}
                                 onClick={() => {
                                     setCurrentPanel(PanelView.Pdf);
                                     if (!pdfRendition && !officePdfUrl && !officePdfConverting) {
@@ -460,13 +469,16 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                     </div>
                     <PdfActions object={object} />
                 </div>
-                {currentPanel === PanelView.Text && !showProcessingPanel && (
+                {currentPanel === PanelView.Text && !showProcessingPanel && !isEditing && (
                     <TextActions
                         object={object}
                         text={displayText}
                         fullText={fullText}
                         handleCopyContent={handleCopyContent}
                         textContainerRef={textContainerRef}
+                        isEditing={isEditing}
+                        onToggleEdit={() => setIsEditing(true)}
+                        canEdit={canEdit}
                     />
                 )}
                 {currentPanel === PanelView.Pdf && isPreviewableAsPdfDoc && (pdfRendition || officePdfUrl) && (
@@ -525,6 +537,18 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                     textContainerRef={textContainerRef}
                 />
             </div>
+            {isEditing && currentPanel === PanelView.Text && fullText != null && (
+                <TextEditorPanel
+                    object={object}
+                    text={fullText}
+                    onClose={() => setIsEditing(false)}
+                    onSaved={() => {
+                        setIsEditing(false);
+                        reloadText();
+                        refetch?.();
+                    }}
+                />
+            )}
         </div>
     );
 }
@@ -534,9 +558,12 @@ function TextActions({
     text,
     fullText,
     handleCopyContent,
+    onToggleEdit,
+    canEdit,
 }: TextActionsProps) {
     const { client } = useUserSession();
     const toast = useToast();
+    const { t } = useUITranslation();
     const content = object.content;
     const { renderDocument, isDownloading } = useDownloadFile({ client, toast });
 
@@ -556,7 +583,7 @@ function TextActions({
         toast({
             status: "info",
             title: `Preparing ${format.toUpperCase()}`,
-            description: "Rendering your document...",
+            description: t('store.renderingDocument'),
             duration: 2000,
         });
 
@@ -608,6 +635,18 @@ function TextActions({
                             <Button variant="ghost" size="sm" title="Copy text" onClick={() => handleCopyContent(fullText, "text")}>
                                 <Copy className="size-4" />
                             </Button>
+                            {canEdit && onToggleEdit && (
+                                <SecureButton
+                                    permission={Permission.content_write}
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={onToggleEdit}
+                                    title={t('store.editText')}
+                                    className="flex items-center gap-2"
+                                >
+                                    <SquarePen className="size-4" />
+                                </SecureButton>
+                            )}
                             <Button variant="ghost" size="sm" title="Download text" onClick={handleDownloadText}>
                                 <Download className="size-4" />
                             </Button>
@@ -657,6 +696,7 @@ const TextPanel = memo(({
     isTextCropped,
     textContainerRef,
 }: TextPanelProps) => {
+    const { t } = useUITranslation();
     const content = object.content;
     const isCreatedOrProcessing = isCreatedOrProcessingStatus(object?.status);
 
@@ -680,12 +720,12 @@ const TextPanel = memo(({
                     <div className="px-2 py-2 bg-attention/10 border-l-4 border-attention mx-2 mb-2 rounded">
                         <div className="flex items-center gap-2 text-attention">
                             <AlertTriangle className="size-4" />
-                            <span className="text-sm font-semibold">Showing first 128K characters only</span>
+                            <span className="text-sm font-semibold">{t('store.showingFirst128K')}</span>
                         </div>
                     </div>
                 )}
                 <div
-                    className={`max-w-7xl px-2 ${PANEL_HEIGHTS.content} overflow-auto`}
+                    className={`max-w-7xl px-2 h-full overflow-auto`}
                     ref={textContainerRef}
                 >
                     {isXml ? (
@@ -771,6 +811,7 @@ function ImagePanel({ object }: { object: ContentObject }) {
 }
 
 function VideoPanel({ object }: { object: ContentObject }) {
+    const { t } = useUITranslation();
     const { client } = useUserSession();
     const [videoUrl, setVideoUrl] = useState<string>();
     const [posterUrl, setPosterUrl] = useState<string>();
@@ -842,12 +883,12 @@ function VideoPanel({ object }: { object: ContentObject }) {
     }, [isVideo, webRendition, isOriginalWebSupported, content?.source, client]);
 
     return (
-        <div className="mb-4 px-2">
+        <div className="mb-4 px-2 w-full h-full">
             {!webRendition && !isOriginalWebSupported ? (
                 <div className="flex justify-center items-center h-[400px] text-muted">
                     <div className="text-center">
-                        <p>No web-compatible video rendition available</p>
-                        <p className="text-sm mt-2">MP4 or WebM format required</p>
+                        <p>{t('store.noVideoRendition')}</p>
+                        <p className="text-sm mt-2">{t('store.videoFormatRequired')}</p>
                     </div>
                 </div>
             ) : isLoading ? (
@@ -859,7 +900,7 @@ function VideoPanel({ object }: { object: ContentObject }) {
                     src={videoUrl}
                     poster={posterUrl}
                     controls
-                    className={`w-full ${PANEL_HEIGHTS.video} object-contain`}
+                    className={`w-full h-full object-contain`}
                 >
                     Your browser does not support the video tag.
                 </video>
@@ -873,6 +914,7 @@ function VideoPanel({ object }: { object: ContentObject }) {
 }
 
 function AudioPanel({ object }: { object: ContentObject }) {
+    const { t } = useUITranslation();
     const { client } = useUserSession();
     const [audioUrl, setAudioUrl] = useState<string>();
     const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -928,8 +970,8 @@ function AudioPanel({ object }: { object: ContentObject }) {
             {!audioRendition && !isOriginalWebSupported ? (
                 <div className="flex justify-center items-center h-[200px] text-muted">
                     <div className="text-center">
-                        <p>No web-compatible audio rendition available</p>
-                        <p className="text-sm mt-2">MP3, M4A, OGG, WAV, or WebM format required</p>
+                        <p>{t('store.noAudioRendition')}</p>
+                        <p className="text-sm mt-2">{t('store.audioFormatRequired')}</p>
                     </div>
                 </div>
             ) : isLoading ? (
@@ -972,6 +1014,7 @@ function formatDuration(seconds: number): string {
 }
 
 function TranscriptPanel({ object, handleCopyContent }: { object: ContentObject, handleCopyContent: (content: string, type: "text" | "properties") => Promise<void> }) {
+    const { t } = useUITranslation();
     const transcript = object.transcript;
     const transcriptText = transcript?.text;
     const segments = transcript?.segments;
@@ -1004,7 +1047,7 @@ function TranscriptPanel({ object, handleCopyContent }: { object: ContentObject,
                     </Button>
                 )}
             </div>
-            <div className={`${PANEL_HEIGHTS.content} overflow-auto px-2`}>
+            <div className={`h-full} overflow-auto px-2`}>
                 {segments && segments.length > 0 ? (
                     <div className="space-y-2">
                         {segments.map((segment, idx) => (
@@ -1022,7 +1065,7 @@ function TranscriptPanel({ object, handleCopyContent }: { object: ContentObject,
                         {transcriptText}
                     </pre>
                 ) : (
-                    <div className="text-muted">No transcript available</div>
+                    <div className="text-muted">{t('store.noTranscriptAvailable')}</div>
                 )}
             </div>
         </div>
@@ -1064,6 +1107,7 @@ function OfficePdfActions({
 }: OfficePdfActionsProps) {
     const { client } = useUserSession();
     const toast = useToast();
+    const { t } = useUITranslation();
     const [isDownloading, setIsDownloading] = useState(false);
 
     const handleDownloadPdf = async () => {
@@ -1089,8 +1133,8 @@ function OfficePdfActions({
             console.error('Failed to download PDF:', err);
             toast({
                 status: 'error',
-                title: 'Download failed',
-                description: 'Failed to download the PDF file',
+                title: t('store.downloadFailed'),
+                description: t('store.failedToDownloadPdf'),
                 duration: 5000,
             });
         } finally {
@@ -1115,7 +1159,7 @@ function OfficePdfActions({
 
 function PdfPreviewPanel({ object }: { object: ContentObject }) {
     return (
-        <div className={PANEL_HEIGHTS.content}>
+        <div className='h-full'>
             <SimplePdfViewer
                 object={object}
                 className="h-full"
@@ -1135,11 +1179,12 @@ function OfficePdfPreviewPanel({
     officePdfError,
     onConvert,
 }: OfficePdfPreviewPanelProps) {
+    const { t } = useUITranslation();
     if (officePdfConverting) {
         return (
             <div className="flex flex-col justify-center items-center flex-1 gap-2">
                 <Spinner size="lg" />
-                <span className="text-muted">Converting to PDF...</span>
+                <span className="text-muted">{t('store.convertingToPdf')}</span>
             </div>
         );
     }
@@ -1155,7 +1200,7 @@ function OfficePdfPreviewPanel({
 
     if (pdfRendition?.content?.source) {
         return (
-            <div className={PANEL_HEIGHTS.content}>
+            <div className='h-full'>
                 <SimplePdfViewer source={pdfRendition.content.source} className="h-full" />
             </div>
         );
@@ -1163,7 +1208,7 @@ function OfficePdfPreviewPanel({
 
     if (officePdfUrl) {
         return (
-            <div className={PANEL_HEIGHTS.content}>
+            <div className='h-full'>
                 <SimplePdfViewer url={officePdfUrl} className="h-full" />
             </div>
         );
@@ -1179,6 +1224,7 @@ function OfficePdfPreviewPanel({
 }
 
 function PdfProcessingPanel({ progress, status, outputFormat }: { progress?: DocAnalyzerProgress, status?: WorkflowExecutionStatus, outputFormat?: DocProcessorOutputFormat }) {
+    const { t } = useUITranslation();
     const statusColor = getWorkflowStatusColor(status);
     const statusName = getWorkflowStatusName(status);
 
@@ -1219,7 +1265,7 @@ function PdfProcessingPanel({ progress, status, outputFormat }: { progress?: Doc
             {!progress && (
                 <div className="flex items-center gap-2 text-muted">
                     <Spinner size="sm" />
-                    <span>Loading processing status...</span>
+                    <span>{t('store.loadingProcessingStatus')}</span>
                 </div>
             )}
         </div>

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

@@ -6,13 +6,14 @@ import { ContentObjectItem } from '@vertesia/common'
 import { Button, Card, CardContent, Separator, VTooltip } from "@vertesia/ui/core"
 import { useUserSession } from "@vertesia/ui/session"
 import { DocumentSelection } from '../DocumentSelectionProvider'
-import { Eye } from 'lucide-react'
+import { CheckIcon, Eye } from 'lucide-react'
 
 interface DocumentIconProps {
     document: ContentObjectItem
     onSelectionChange: ((object: ContentObjectItem, ev: ChangeEvent<HTMLInputElement>) => void);
     selection: DocumentSelection;
     onRowClick?: (object: ContentObjectItem) => void;
+    highlightRow?: (item: ContentObjectItem) => boolean;
     previewObject?: (objectId: string) => void;
     selectedObject?: ContentObjectItem | null;
 }
@@ -46,7 +47,7 @@ export function DocumentIconSkeleton({ isLoading = false, counts = 6 }: { isLoad
     )
 }
 
-export function DocumentIcon({ selection, document, onSelectionChange, onRowClick, previewObject, selectedObject }: Readonly<DocumentIconProps>) {
+export function DocumentIcon({ selection, document, onSelectionChange, onRowClick, highlightRow, previewObject, selectedObject }: Readonly<DocumentIconProps>) {
     const { client } = useUserSession()
 
     const [renditionUrl, setRenditionUrl] = useState<string | undefined>(undefined)
@@ -67,8 +68,15 @@ export function DocumentIcon({ selection, document, onSelectionChange, onRowClic
         retrieveRendition(client, document, setRenditionUrl, setRenditionAlt, setRenditionStatus)
     }, [document])
 
+    const isHighlighted = highlightRow?.(document);
+
     return (
-        <Card className={`relative flex flex-col border h-fit w-full ${selectedObject?.id === document.id ? 'border-attention border-4' : ''}`} onClick={() => (onRowClick && onRowClick(document))}>
+        <Card className={`relative flex flex-col border h-fit w-full ${selectedObject?.id === document.id ? 'border-attention border-4' : ''} ${isHighlighted ? 'border-blue-400 dark:border-blue-500 bg-blue-50/50 dark:bg-blue-900/20' : ''}`} onClick={() => (onRowClick && onRowClick(document))}>
+            {isHighlighted && (
+                <div className="absolute top-2 right-8 z-10">
+                    <CheckIcon className="size-4 text-blue-600 dark:text-blue-400" />
+                </div>
+            )}
             {
                 selection && (
                     <div